<template>
  <div class="email-container">
    <!-- 使用封装的顶部导航组件 -->
    <MainHeader/>

    <!-- 主要内容区 -->
    <div class="main-container">
      <!-- 使用封装的侧边菜单组件 -->
      <SideMenu/>

      <!-- 右侧内容区 -->
      <div class="content">
        <!-- 水平选项卡菜单 -->
        <div class="horizontal-menu">
          <div
              v-for="(tab, index) in tabs"
              :key="index"
              :class="['menu-item', { active: activeTab === tab.name }]"
              @click="activeTab = tab.name"
          >
            {{
              tab.name === 'sendRecord' ? t('email.tab.send.record', {}, '发送记录') :
                  tab.name === 'sendEmail' ? t('email.tab.send.email', {}, '发邮件') :
                      tab.name === 'emailConfig' ? t('email.tab.emailConfig', {}, '邮箱配置') :
                          tab.name === 'emailGuide' ? t('email.tab.emailGuide', {}, '使用说明') : tab.label
            }}
          </div>
        </div>

        <!-- 发送记录 Tab -->
        <div v-if="activeTab === 'sendRecord'" class="tab-content">
          <!-- 发送概览 -->
          <div class="section-container">
            <div class="section-header">
              <div class="section-title">{{ t('email.send.overview') }}</div>
            </div>

            <div class="date-selector">
              <div class="date-buttons">
                <el-button :type="dateRange === 'all' ? 'primary' : ''" @click="setDateRange('all')">
                  {{ t('email.date.all') }}
                </el-button>
                <el-button :type="dateRange === 'month' ? 'primary' : ''" @click="setDateRange('month')">
                  {{ t('email.date.month') }}
                </el-button>
                <el-button :type="dateRange === 'week' ? 'primary' : ''" @click="setDateRange('week')">
                  {{ t('email.date.week') }}
                </el-button>
                <el-button :type="dateRange === 'day' ? 'primary' : ''" @click="setDateRange('day')">
                  {{ t('email.date.day') }}
                </el-button>
                <el-button :type="dateRange === 'year' ? 'primary' : ''" @click="setDateRange('year')">
                  {{ t('email.date.year') }}
                </el-button>
              </div>
            </div>

            <div class="stats-cards">
              <div class="stat-card">
                <div class="card-icon task-icon">
                  <el-icon>
                    <Message/>
                  </el-icon>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ emailStats.openRate }}%</div>
                  <div class="card-label">{{ t('email.stats.open.rate') }}</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="card-icon total-icon">
                  <el-icon>
                    <ChatDotSquare/>
                  </el-icon>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ emailStats.deliveryRate }}%</div>
                  <div class="card-label">{{ t('email.stats.delivery.rate') }}</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="card-icon success-icon">
                  <el-icon>
                    <ChatLineSquare/>
                  </el-icon>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ emailStats.tasks }}</div>
                  <div class="card-label">{{ t('email.stats.tasks') }}</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="card-icon fail-icon">
                  <el-icon>
                    <WarningFilled/>
                  </el-icon>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ emailStats.totalEmails }}</div>
                  <div class="card-label">{{ t('email.stats.total') }}</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="card-icon ratio-icon">
                  <el-icon>
                    <DataLine/>
                  </el-icon>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ emailStats.sentEmails }}</div>
                  <div class="card-label">{{ t('email.stats.sent') }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 邮件情况概览 -->
          <div class="section-container">
            <div class="section-header">
              <div class="section-title">{{ t('email.status.overview') }}</div>
              <div class="tab-buttons">
                <button :class="['date-btn', { active: chartPeriod === 'week' }]" @click="setChartPeriod('week')">
                  {{ t('email.date.week') }}
                </button>
                <button :class="['date-btn', { active: chartPeriod === 'month' }]" @click="setChartPeriod('month')">
                  {{ t('email.date.month') }}
                </button>
                <button :class="['date-btn', { active: chartPeriod === 'year' }]" @click="setChartPeriod('year')">
                  {{ t('email.date.year') }}
                </button>
              </div>
            </div>

            <div class="chart-container">
              <div class="chart-row">
                <div class="chart-box">
                  <h3 class="chart-title">{{ t('email.chart.status.distribution') }}</h3>
                  <div class="chart-wrapper">
                    <v-chart class="pie-chart" :option="pieChartOption" autoresize/>
                  </div>
                </div>
                <div class="chart-box">
                  <h3 class="chart-title">{{ t('email.chart.send.trend') }}</h3>
                  <div class="chart-wrapper">
                    <v-chart class="line-chart" :option="lineChartOption" autoresize/>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 邮件列表 -->
          <div class="section-container">
            <div class="section-header">
              <div class="tab-buttons email-list-tabs">
                <div :class="['tab-btn', { active: listTab === 'all' }]" @click="listTab = 'all'">
                  {{ t('email.send.records') }}
                </div>
              </div>
            </div>

            <div class="email-list">
              <el-table :data="emailRecords" style="width: 100%" v-loading="loading">
                <el-table-column prop="subject" :label="t('email.table.subject')" min-width="180"/>
                <el-table-column prop="recipients" :label="t('email.table.recipients')" width="120">
                  <template #default="scope">
                    {{ scope.row.recipients?.split(';').length || 0 }}
                  </template>
                </el-table-column>
                <el-table-column prop="sendTime" :label="t('email.table.send.time')" width="180">
                  <template #default="scope">
                    {{ new Date(scope.row.sendTime).toLocaleString() }}
                  </template>
                </el-table-column>
                <el-table-column prop="deliveryCount" :label="t('email.table.delivered')" width="120"/>
                <el-table-column prop="status" :label="t('email.table.status')" width="120">
                  <template #default="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 0 ? 'warning' : 'danger'">
                      {{
                        scope.row.status === 1 ? t('email.status.sent') : scope.row.status === 0 ? t('email.status.sending') : t('email.status.failed')
                      }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column :label="t('email.table.actions')" width="150">
                  <template #default="scope">
                    <el-button type="text" size="small" @click="viewRecordDetail(scope.row)">
                      {{ t('email.action.details') }}
                    </el-button>
                    <!--                    <el-button type="text" size="small" @click="deleteEmailRecord(scope.row)">-->
                    <!--                      {{ t('email.action.delete') }}-->
                    <!--                    </el-button>-->
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件 -->
              <div class="pagination-container" v-if="hasEmails">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
              </div>

              <div v-if="!hasEmails" class="empty-data">
                <img src="../assets/icons/empty-data.svg" alt="暂无数据"/>
                <p>{{ t('email.no.data') }}</p>
              </div>
            </div>

            <!-- 邮件详情对话框 -->
            <el-dialog
                v-model="recordDetailVisible"
                :title="t('email.dialog.details')"
                width="800px"
                class="email-detail-dialog"
            >
              <div v-if="currentRecord" class="email-detail">
                <el-card class="detail-header">
                  <div class="detail-subject">{{ currentRecord.subject }}</div>
                  <div class="detail-status">
                    <el-tag
                        :type="currentRecord.status === 1 ? 'success' : currentRecord.status === 0 ? 'warning' : 'danger'"
                        size="small">
                      {{
                        currentRecord.status === 1 ? t('email.status.sent') : currentRecord.status === 0 ? t('email.status.sending') : t('email.status.failed')
                      }}
                    </el-tag>
                    <span class="detail-time">{{ new Date(currentRecord.sendTime).toLocaleString() }}</span>
                  </div>
                </el-card>

                <div class="detail-section">
                  <div class="detail-row">
                    <div class="detail-label">{{ t('email.detail.sender') }}：</div>
                    <div class="detail-value sender-info">
                      <!--                      <el-avatar size="small" icon="el-icon-user"></el-avatar>-->
                      <span>{{ currentRecord.sender }}</span>
                    </div>
                  </div>

                  <div class="detail-row">
                    <div class="detail-label">{{ t('email.detail.recipients') }}：</div>
                    <div class="detail-value">
                      <div class="recipients-container">
                        <el-tag
                            v-for="(recipient, index) in parsedRecipients"
                            :key="index"
                            size="small"
                            effect="plain"
                            class="recipient-tag"
                        >
                          {{ recipient }}
                        </el-tag>
                      </div>
                      <div v-if="!parsedRecipients.length" class="empty-info">
                        {{ t('email.detail.no.recipients') }}
                      </div>
                    </div>
                  </div>

                  <div class="detail-row">
                    <div class="detail-label">{{ t('email.detail.delivery') }}：</div>
                    <div class="detail-value">
                      <el-progress
                          :percentage="deliveryPercentage"
                          :status="deliveryStatus"
                          :stroke-width="10"
                          :text-inside="true"
                      ></el-progress>
                      <div class="delivery-info">
                        <el-tooltip placement="top" :content="t('email.detail.delivered.count')">
                          <span class="delivery-stat">
                            <el-icon class="deliver-icon"><Check/></el-icon>
                            {{ currentRecord.deliveryCount || 0 }}
                          </span>
                        </el-tooltip>
                        <span class="delivery-divider">/</span>
                        <el-tooltip placement="top" :content="t('email.detail.total.recipients')">
                          <span class="delivery-stat">
                            <el-icon class="total-icon"><User/></el-icon>
                            {{ recipientsCount }}
                          </span>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>

                  <div class="detail-row" v-if="parsedAttachments.length > 0">
                    <div class="detail-label">{{ t('email.detail.attachments') }}：</div>
                    <div class="detail-value">
                      <div class="attachments-list">
                        <div v-for="(attachment, index) in parsedAttachments" :key="index"
                             class="attachment-item">
                          <div class="attachment-icon">
                            <el-icon v-if="getFileType(attachment) === 'pdf'">
                              <Document/>
                            </el-icon>
                            <el-icon v-else-if="getFileType(attachment) === 'image'">
                              <Picture/>
                            </el-icon>
                            <el-icon v-else-if="getFileType(attachment) === 'excel'">
                              <Grid/>
                            </el-icon>
                            <el-icon v-else-if="getFileType(attachment) === 'word'">
                              <Reading/>
                            </el-icon>
                            <el-icon v-else-if="getFileType(attachment) === 'zip'">
                              <FolderOpened/>
                            </el-icon>
                            <el-icon v-else>
                              <Document/>
                            </el-icon>
                          </div>
                          <div class="attachment-info">
                            <div class="attachment-name">{{ getFileName(attachment) }}</div>
                            <div class="attachment-size" v-if="attachment.size">{{
                                formatFileSize(attachment.size)
                              }}
                            </div>
                          </div>
                          <div class="attachment-actions">
                            <el-tooltip :content="t('eamil.detial.preview')" placement="top">
                              <el-button size="small" type="primary" circle
                                         @click="previewAttachment(attachment, index)">
                                <el-icon>
                                  <View/>
                                </el-icon>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('eamil.detial.download')" placement="top">
                              <el-button size="small" type="success" circle
                                         @click="downloadAttachmentFile(attachment, index)">
                                <el-icon>
                                  <Download/>
                                </el-icon>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="content-section">
                  <div class="content-header">{{ t('email.detail.content') }}</div>
                  <div class="content-body">
                    <div v-html="currentRecord.content" class="html-content"></div>
                  </div>
                </div>
              </div>
            </el-dialog>
          </div>
        </div>

        <!-- 发邮件 Tab -->
        <div v-else-if="activeTab === 'sendEmail'" class="tab-content">
          <div class="email-form">
            <div class="form-group">
              <label>{{ t('email.form.sender') }}：</label>
              <el-select v-model="emailForm.sender" :placeholder="t('email.form.sender.placeholder')"
                         style="width: 100%">
                <el-option
                    v-for="email in verifiedEmails"
                    :key="email.id"
                    :label="email.emailAddress"
                    :value="email.emailAddress"
                />
              </el-select>
              <!-- 临时注释掉默认邮箱提示 -->
              <!-- <div class="form-tip">
                <span>{{ t('email.form.use.default.email') }}：2209339094@shuhailinghang.cn</span>
              </div> -->
            </div>

            <div class="form-group">
              <label>{{ t('email.form.recipients') }}：</label>
              <div class="recipient-input-group">
                <el-input v-model="emailForm.recipients" :placeholder="t('email.form.recipients.placeholder')"/>
                <el-button type="primary" size="small" @click="showImportRecipientsDialog">
                  <el-icon>
                    <Upload/>
                  </el-icon>
                  {{ t('email.import.recipients') }}
                </el-button>
              </div>
            </div>

            <!-- <div class="form-group">
              <label>{{ t('email.form.reply.to') }}：</label>
              <el-input v-model="emailForm.replyTo" :placeholder="t('email.form.reply.to.placeholder')"/>
            </div> -->

            <div class="form-group">
              <label>{{ t('email.form.subject') }}：</label>
              <el-input v-model="emailForm.subject" :placeholder="t('email.form.subject.placeholder')"/>
            </div>

            <div class="form-group">
              <label>{{ t('email.form.send.time') }}：</label>
              <div class="send-options">
                <el-radio v-model="emailForm.sendType" label="immediate">{{ t('email.form.send.immediate') }}</el-radio>
                <!-- <el-radio v-model="emailForm.sendType" label="scheduled">{{ t('email.form.send.scheduled') }}</el-radio> -->
              </div>

              <div v-if="emailForm.sendType === 'scheduled'" class="schedule-options">
                <el-date-picker
                    v-model="emailForm.scheduledDate"
                    type="datetime"
                    :placeholder="t('email.form.select.time')"
                    format="YYYY-MM-DD HH:mm"
                    :disabled-date="disablePastDates"
                />

                <el-select v-model="emailForm.timezone" :placeholder="t('email.form.select.timezone')"
                           style="width: 200px; margin-left: 10px;">
                  <el-option :label="t('email.form.timezone.auto')" value="auto"/>
                  <el-option :label="t('email.form.timezone.beijing')" value="UTC+8"/>
                  <el-option :label="t('email.form.timezone.gmt')" value="UTC+0"/>
                  <el-option :label="t('email.form.timezone.est')" value="UTC-5"/>
                  <el-option :label="t('email.form.timezone.pst')" value="UTC-8"/>
                </el-select>
              </div>
            </div>

            <div class="form-group">
              <label>{{ t('email.form.content') }}：</label>
              <!-- 临时注释掉模板选择功能 -->
              <!-- <div class="content-type-selector">
                <el-radio-group v-model="emailForm.contentType" @change="handleContentTypeChange">
                  <el-radio label="custom">{{ t('email.form.content.custom') }}</el-radio>
                  <el-radio label="systemTemplate">{{ t('email.form.content.system') }}</el-radio>
                  <el-radio label="personalTemplate">{{ t('email.form.content.personal') }}</el-radio>
                </el-radio-group>
              </div>

              <div v-if="emailForm.contentType !== 'custom'" class="template-selector">
                <el-select
                    v-model="emailForm.templateId"
                    :placeholder="t('email.form.select.template')"
                    style="width: 100%"
                    @change="handleTemplateChange"
                >
                  <el-option
                      v-for="template in emailForm.contentType === 'systemTemplate' ? systemTemplates : personalTemplates"
                      :key="template.id"
                      :label="template.name"
                      :value="template.id"
                  />
                </el-select>
                <div v-if="emailForm.contentType === 'personalTemplate'" class="template-actions">
                  <el-button class="template-btn" @click="activeTab = 'templates'">{{
                      t('email.form.manage.templates')
                    }}
                  </el-button>
                </div>
              </div> -->

              <div class="editor-content" contenteditable="true" ref="emailEditor" @input="updateEmailContent"
                   :class="{ 'readonly': emailForm.contentType !== 'custom' && emailForm.templateId }">
              </div>
            </div>

            <div class="form-group attachments">
              <label>{{ t('email.form.attachments') }}</label>
              <el-upload
                  action="#"
                  :auto-upload="false"
                  :on-change="handleFileChange"
                  :on-remove="handleFileRemove"
                  :file-list="emailForm.attachments"
                  :limit="5"
              >
                <el-button type="primary">{{ t('email.form.add.attachment') }}</el-button>
                <template #tip>
                  <div class="el-upload__tip">{{ t('email.form.attachment.limit') }}</div>
                </template>
              </el-upload>
            </div>

            <div class="form-actions">
              <el-button @click="resetEmailForm">{{ t('email.form.reset') }}</el-button>
              <div class="right-actions">
                <!-- 临时注释掉保存为模板按钮 -->
                <!-- <el-button @click="saveAsTemplate">{{ t('email.form.save.as.template') }}</el-button> -->
                <el-button type="primary" @click="sendEmail" :loading="sendingEmail">{{
                    t('email.form.send')
                  }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 临时注释掉邮件模板功能 -->
        <!-- <div v-else-if="activeTab === 'templates'" class="tab-content">
          <div class="templates-header">
            <div class="tab-buttons">
              <button :class="['tab-btn', { active: templateType === 'system' }]" @click="templateType = 'system'">
                {{ t('email.template.system') }}
              </button>
              <button :class="['tab-btn', { active: templateType === 'personal' }]" @click="templateType = 'personal'">
                {{ t('email.template.personal') }}
              </button>
            </div>
            <div class="template-actions">
              <el-button type="primary" @click="showNewTemplateDialog" :disabled="templateType === 'system'">
                {{ t('email.template.create') }}
              </el-button>
              <el-button :disabled="selectedTemplates.length === 0 || templateType === 'system'"
                         @click="batchDeleteTemplates">{{ t('email.template.delete') }}
              </el-button>
            </div>
          </div>

          <div class="templates-container">
            <div class="template-list">
              <el-table
                  :data="filteredTemplates"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  v-loading="templatesLoading"
              >
                <el-table-column
                    type="selection"
                    width="55"
                    :selectable="row => row.type !== 'system'"
                />
                <el-table-column prop="name" :label="t('email.template.name')"/>
                <el-table-column prop="subject" :label="t('email.template.subject')"/>
                <el-table-column prop="createTime" :label="t('email.template.create.time')"/>
                <el-table-column prop="creator" :label="t('email.template.creator')"/>
                <el-table-column :label="t('email.template.actions')" width="150">
                  <template #default="scope">
                    <el-button
                        v-if="scope.row.type !== 'system'"
                        type="text"
                        size="small"
                        @click="editTemplate(scope.row)"
                    >{{ t('email.template.edit') }}
                    </el-button>
                    <el-button
                        v-if="scope.row.type !== 'system'"
                        type="text"
                        size="small"
                        @click="deleteTemplate(scope.row)"
                    >{{ t('email.template.delete') }}
                    </el-button>
                    <el-button
                        v-if="scope.row.type === 'system'"
                        type="text"
                        size="small"
                        @click="viewTemplate(scope.row)"
                    >{{ t('email.template.view') }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div v-if="filteredTemplates.length === 0" class="empty-data">
              <img src="../assets/icons/empty-data.svg" alt="暂无数据"/>
              <p>{{ t('email.no.data') }}</p>
            </div>
          </div>

          临时注释掉新建/编辑模板对话框
           <el-dialog
              v-model="templateDialogVisible"
              :title="editingTemplate ? t('email.template.dialog.edit') : (viewingTemplate ? t('email.template.dialog.view') : t('email.template.dialog.create'))"
              width="700px"
          >
            <el-form :model="templateForm" label-width="100px">
              <el-form-item :label="t('email.template.form.name')" required>
                <el-input v-model="templateForm.name" :placeholder="t('email.template.form.name.placeholder')"
                          :disabled="viewingTemplate"/>
              </el-form-item>
              <el-form-item :label="t('email.template.form.subject')" required>
                <el-input v-model="templateForm.subject" :placeholder="t('email.template.form.subject.placeholder')"
                          :disabled="viewingTemplate"/>
              </el-form-item>
              <el-form-item :label="t('email.template.form.content')" required>
                <div class="template-editor">
                  <el-input
                      v-model="templateForm.content"
                      type="textarea"
                      :placeholder="t('email.template.form.content.placeholder')"
                      :rows="10"
                      :disabled="viewingTemplate"
                  />
                </div>
              </el-form-item>
              <el-form-item :label="t('email.template.form.variables')">
                <div class="variables-tips">
                  <p>{{ t('email.template.form.available.variables') }}：</p>
                  <ul>
                    <li><code>{姓名}</code> - {{ t('email.template.variable.name') }}</li>
                    <li><code>{公司}</code> - {{ t('email.template.variable.company') }}</li>
                    <li><code>{日期}</code> - {{ t('email.template.variable.date') }}</li>
                    <li><code>{时间}</code> - {{ t('email.template.variable.time') }}</li>
                  </ul>
                </div>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="templateDialogVisible = false">{{
                    viewingTemplate ? t('email.template.close') : t('email.template.cancel')
                  }}</el-button>
                <el-button v-if="!viewingTemplate" type="primary" @click="saveTemplate">{{
                    t('email.template.save')
                  }}</el-button>
              </span>
            </template>
          </el-dialog> -->
        <!-- </div> -->

        <!-- 临时注释掉域名配置功能 -->
        <!-- <div v-else-if="activeTab === 'domains'" class="tab-content">
          <div class="domains-header">
            <h3>{{ t('email.domain.config') }}</h3>
            <el-button type="primary" @click="showAddDomainDialog">{{ t('email.domain.add') }}</el-button>
          </div>

          <div class="domains-list">
            <el-table
                :data="domainList"
                style="width: 100%"
                v-loading="domainsLoading"
            >
              <el-table-column prop="domain" :label="t('email.domain.name')"/>
              <el-table-column :label="t('email.domain.status')">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.status === 'verified' ? 'success' : (scope.row.status === 'pending' ? 'warning' : 'danger')">
                    {{ domainStatusMap[scope.row.status] }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="addTime" :label="t('email.domain.add.time')"/>
              <el-table-column :label="t('email.domain.actions')" width="250">
                <template #default="scope">
                  <el-button
                      v-if="scope.row.status === 'pending'"
                      type="text"
                      size="small"
                      @click="showVerifyDomainDialog(scope.row)"
                  >{{ t('email.domain.verify') }}
                  </el-button>
                  <el-button
                      v-if="scope.row.status === 'failed'"
                      type="text"
                      size="small"
                      @click="showVerifyDomainDialog(scope.row)"
                  >{{ t('email.domain.reverify') }}
                  </el-button>
                  <el-button
                      type="text"
                      size="small"
                      @click="toggleDefaultDomain(scope.row)"
                      :disabled="scope.row.status !== 'verified'"
                  >{{ scope.row.isDefault ? t('email.domain.already.default') : t('email.domain.set.default') }}
                  </el-button>
                  <el-button
                      type="text"
                      size="small"
                      class="danger-btn"
                      @click="deleteDomain(scope.row)"
                  >{{ t('email.domain.delete') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-if="domainList.length === 0" class="empty-data">
            <img src="../assets/icons/empty-data.svg" alt="暂无数据"/>
            <p>{{ t('email.domain.no.data') }}</p>
            <el-button type="primary" @click="showAddDomainDialog">{{ t('email.domain.add.first') }}</el-button>
          </div>

          <el-dialog
              v-model="domainDialogVisible"
              :title="t('email.domain.dialog.add')"
              width="600px"
          >
            <el-form :model="domainForm" label-width="120px">
              <el-form-item :label="t('email.domain.form.name')" required>
                <el-input v-model="domainForm.domain" :placeholder="t('email.domain.form.name.placeholder')"/>
                <div class="form-tip">
                  {{ t('email.domain.form.name.tip') }}
                </div>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="domainDialogVisible = false">{{ t('email.domain.cancel') }}</el-button>
                <el-button type="primary" @click="addDomain" :loading="addingDomain">{{
                    t('email.domain.confirm')
                  }}</el-button>
              </span>
            </template>
          </el-dialog>

         <el-dialog
              v-model="verifyDomainDialogVisible"
              :title="t('email.domain.dialog.verify')"
              width="700px"
          >
            <div class="verify-domain-content">
              <h4>{{ t('email.domain.verify.instructions') }}</h4>
              <p>{{ t('email.domain.verify.description') }}</p>

              <div class="verify-method">
                <h5>{{ t('email.domain.verify.dns') }}</h5>
                <div class="dns-records">
                  <p>{{ t('email.domain.verify.add.records') }}：</p>
                  <div class="record-item">
                    <p><strong>{{ t('email.domain.record.type') }}:</strong> TXT</p>
                    <p><strong>{{ t('email.domain.record.host') }}:</strong> {{ verifyDomainInfo.host }}</p>
                    <p><strong>{{ t('email.domain.record.value') }}:</strong> {{ verifyDomainInfo.value }}</p>
                    <el-button type="text" @click="copyText(verifyDomainInfo.value)">{{
                        t('email.domain.copy')
                      }}
                    </el-button>
                  </div>
                </div>
              </div>

              <div class="domain-verify-actions">
                <el-button @click="verifyDomainDialogVisible = false">{{ t('email.domain.later') }}</el-button>
                <el-button type="primary" @click="verifyDomain" :loading="verifyingDomain">
                  {{ t('email.domain.check.now') }}
                </el-button>
              </div>
            </div>
          </el-dialog> -->
        <!-- </div> -->

        <!-- 邮箱配置 Tab -->
        <div v-if="activeTab === 'emailConfig'" class="tab-content">
          <div class="email-config-header">
            <h3>{{ t('email.email.config') }}</h3>
            <el-button type="primary" @click="showAddEmailConfigDialog">{{ t('email.email.add') }}</el-button>
          </div>

          <div class="email-config-list">
            <el-table
                :data="savedEmails"
                style="width: 100%"
                v-loading="verifyingEmail"
            >
              <el-table-column prop="emailAddress" :label="t('email.email.address')"/>
              <el-table-column :label="t('email.email.provider')">
                <template #default="scope">
                  <span>{{ getEmailProviderName(scope.row.emailProvider) }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="t('email.email.status')">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 1 ? 'success' : (scope.row.status === 0 ? 'warning' : 'danger')">
                    {{
                      scope.row.status === 1 ? t('email.email.status.verified') : (scope.row.status === 0 ? t('email.email.status.pending') : t('email.email.status.failed'))
                    }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createdTime" :label="t('email.email.add.time')"/>
              <el-table-column :label="t('email.email.actions')" width="250">
                <template #default="scope">
                  <el-button
                      v-if="scope.row.status !== 1 && scope.row.emailProvider !== 'outlook'"
                      type="text"
                      size="small"
                      @click="showVerifyEmailDialog(scope.row)"
                  >{{ t('email.email.verify') }}
                  </el-button>
                  <el-button
                      v-if="scope.row.status !== 1 && scope.row.emailProvider === 'outlook'"
                      type="text"
                      size="small"
                      @click="showOutlookOAuthDialog(scope.row)"
                  >
                    {{ t('email.outlook.oauth.verify') }}
                    <!--                    OAuth认证-->
                  </el-button>
                  <el-button
                      type="text"
                      size="small"
                      @click="setDefaultEmail(scope.row)"
                      :disabled="scope.row.status !== 1"
                  >{{ t('email.email.set.default') }}
                  </el-button>
                  <!-- 只在状态不是待验证(0)时显示 -->
                  <el-button
                      type="text"
                      size="small"
                      v-if="scope.row.status !== 0"
                      @click="showEditEmailDialog(scope.row)"
                  >{{ t('email.email.verify.again') }}
                  </el-button>
                  <el-button
                      type="text"
                      size="small"
                      class="danger-btn"
                      @click="deleteEmailConfig(scope.row)"
                  >{{ t('email.email.delete') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-if="savedEmails.length === 0" class="empty-data">
            <img src="../assets/icons/empty-data.svg" alt="暂无数据"/>
            <p>{{ t('email.email.no.data') }}</p>
            <el-button type="primary" @click="showAddEmailConfigDialog">{{ t('email.email.add.first') }}</el-button>
          </div>

          <!-- 添加邮箱配置对话框 -->
          <el-dialog
              v-model="emailConfigDialogVisible"
              :title="t('email.email.dialog.add')"
              width="600px"
          >
            <el-form :model="emailConfigForm" label-width="120px">
              <el-form-item :label="t('email.email.emailProvider')" required>
                <el-select v-model="emailConfigForm.emailProvider" :placeholder="t('email.email.select.provider')">
                  <el-option :label="t('email.email.QQmailbox')" value="qq"/>
                  <el-option :label="t('email.email.163mailbox')" value="163"/>
                  <el-option :label="t('email.email.126mailbox')" value="126"/>
                  <el-option :label="t('email.email.Sinamailbox')" value="sina"/>
                  <el-option :label="t('email.email.Googlemailbox')" value="gmail"/>
                  <el-option :label="t('email.email.Outlookmailbox')" value="outlook"/>
                  <el-option :label="t('email.email.Yahoomailbox')" value="yahoo"/>
                  <!--                  <el-option label="其他" value="other"/>-->
                </el-select>
                <div class="form-tip">
                  {{ t('email.email.form.eamailConfig.select') }}
                </div>
              </el-form-item>
              <el-form-item :label="t('email.email.form.address')" required>
                <el-input v-model="emailConfigForm.emailAddress"
                          :placeholder="t('email.email.form.address.placeholder')"/>
                <div class="form-tip">
                  {{ t('email.email.form.address.tip') }}
                </div>
              </el-form-item>

              <!--              &lt;!&ndash; Outlook OAuth认证信息 &ndash;&gt;-->
              <!--              <template v-if="emailConfigForm.emailProvider === 'outlook'">-->
              <!--                <div class="outlook-oauth-section">-->
              <!--                  <h4 style="margin-top: 15px; margin-bottom: 10px; font-size: 14px;">Outlook OAuth认证信息</h4>-->
              <!--                  <el-form-item label="Client ID" required>-->
              <!--                    <el-input v-model="emailConfigForm.clientId" placeholder="请输入Client ID"/>-->
              <!--                  </el-form-item>-->
              <!--                  <el-form-item label="Tenant ID" required>-->
              <!--                    <el-input v-model="emailConfigForm.tenantId" placeholder="请输入Tenant ID"/>-->
              <!--                  </el-form-item>-->
              <!--                  <el-form-item label="Redirect URI">-->
              <!--                    <el-input v-model="emailConfigForm.redirectUri" placeholder="可选"/>-->
              <!--                  </el-form-item>-->
              <!--                  <el-form-item label="Client Secret">-->
              <!--                    <el-input v-model="emailConfigForm.clientSecret" type="password" placeholder="如为公共客户端可留空"-->
              <!--                              show-password/>-->
              <!--                  </el-form-item>-->
              <!--                  <div class="outlook-oauth-tip" style="margin-top: 10px; color: #409EFF; font-size: 12px;">-->
              <!--                    <el-icon style="margin-right: 5px;">-->
              <!--                      <WarningFilled/>-->
              <!--                    </el-icon>-->
              <!--                    提示: 您需要在Azure Portal中注册应用并获取以上信息。-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </template>-->
              <!--            </el-form>-->
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="emailConfigDialogVisible = false">{{ t('email.email.cancel') }}</el-button>
                <el-button type="primary" @click="addEmailConfig"
                           :loading="addingEmailConfig">{{ t('email.email.confirm') }}</el-button>
              </span>
            </template>
          </el-dialog>

          <!-- Outlook OAuth认证对话框 -->
          <el-dialog
              v-model="outlookOAuthDialogVisible"
              :title=" t('email.outlook.oauth.verify') "
              width="700px"
          >
            <div class="outlook-oauth-content">
              <h4>{{ t('email.outlook.oauth.info') }}</h4>
              <p>{{ t('email.outlook.oauth.azure.info') }}</p>
              <!--              <p>您需要在Azure Portal中注册应用并获取以下信息</p>-->

              <el-form :model="outlookOAuthForm" label-width="120px">
                <el-form-item label="Client ID" required>
                  <el-input v-model="outlookOAuthForm.clientId" :placeholder="t('email.outlook.oauth.clientId.info')"/>
                </el-form-item>
                <el-form-item label="Tenant ID" required>
                  <el-input v-model="outlookOAuthForm.tenantId" :placeholder="t('email.outlook.oauth.tenantId.info')"/>
                </el-form-item>
                <el-form-item label="Redirect URI">
                  <el-input v-model="outlookOAuthForm.redirectUri"
                            :placeholder="t('email.outlook.oauth.redirectUri.info')"/>
                </el-form-item>
                <el-form-item label="Client Secret" required>
                  <el-input v-model="outlookOAuthForm.clientSecret" type="password"
                            :placeholder="t('email.outlook.oauth.clientSecret.info')"
                            show-password/>
                </el-form-item>
              </el-form>

              <div class="outlook-oauth-tip" style="margin-top: 15px; color: #409EFF;">
                <el-icon style="margin-right: 5px;">
                  <WarningFilled/>
                </el-icon>
                {{ t('email.outlook.oauth.hint.info') }}
              </div>

              <div class="outlook-oauth-actions" style="margin-top: 20px; text-align: right;">
                <el-button @click="outlookOAuthDialogVisible = false">{{ t('email.cancel') }}</el-button>
                <el-button type="primary" @click="verifyOutlookOAuth" :loading="verifyingEmail">{{
                    t('email.verify')
                  }}
                </el-button>
              </div>
            </div>
          </el-dialog>

          <!-- 验证邮箱对话框 -->
          <el-dialog
              v-model="verifyEmailDialogVisible"
              :title="t('email.email.dialog.verify')"
              width="700px"
          >
            <div class="verify-email-content">
              <h4>{{ t('email.email.verify.instructions') }}</h4>

              <div class="verify-method">

                <div class="auth-code-input">
                  <el-input
                      v-model="emailVerificationForm.authCode"
                      type="password"
                      :placeholder="t('email.email.form.auth.placeholder')"
                      show-password
                  />
                </div>
                <div class="auth-tip">
                  {{ t('email.email.auth.tip') }}
                </div>
                <div class="verify-wait-tip"
                     style="margin-top: 10px; color: #E6A23C; display: flex; align-items: center;">
                  <el-icon style="margin-right: 5px;">
                    <WarningFilled/>
                  </el-icon>
                  {{ t('email.email.verify.wait.tip') }}
                </div>
              </div>

              <div class="email-verify-actions">
                <el-button @click="verifyEmailDialogVisible = false">{{ t('email.email.later') }}</el-button>
                <el-button type="primary" @click="verifyEmail" :loading="verifyingEmail">{{
                    t('email.email.verify.now')
                  }}
                </el-button>
              </div>
            </div>
          </el-dialog>

          <!-- 重新验证邮箱对话框 -->
          <el-dialog
              v-model="editEmailDialogVisible"
              :title="t('email.email.dialog.verify.again')"
              width="600px"
          >
            <el-form :model="editEmailForm" label-width="120px">
              <el-form-item :label="t('email.email.form.address')" required>
                <el-input v-model="editEmailForm.emailAddress"
                          :placeholder="t('email.email.form.address.placeholder')"/>
              </el-form-item>

              <!-- 非Outlook邮箱显示授权码输入框 -->
              <template v-if="editEmailForm.emailProvider !== 'outlook'">
                <el-form-item :label="t('email.email.form.auth')" required>
                  <el-input v-model="editEmailForm.emailPassword" type="password"
                            :placeholder="t('email.email.form.auth.placeholder')"
                            show-password/>
                </el-form-item>
              </template>

              <!-- Outlook邮箱显示OAuth配置字段 -->
              <template v-else>
                <el-form-item label="Client ID" required>
                  <el-input v-model="editEmailForm.clientId" placeholder="请输入Client ID"/>
                </el-form-item>
                <el-form-item label="Tenant ID" required>
                  <el-input v-model="editEmailForm.tenantId" placeholder="请输入Tenant ID"/>
                </el-form-item>
                <el-form-item label="Redirect URI">
                  <el-input v-model="editEmailForm.redirectUri" placeholder="可选"/>
                </el-form-item>
                <el-form-item label="Client Secret" required>
                  <el-input v-model="editEmailForm.clientSecret" type="password"
                            placeholder="请输入Client Secret"
                            show-password/>
                </el-form-item>
              </template>

              <div class="edit-tip" style="color: #E6A23C; margin-bottom: 15px;">
                <el-icon style="margin-right: 5px;">
                  <WarningFilled/>
                </el-icon>
                {{ t('email.email.verify.again.tip') }}
              </div>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="editEmailDialogVisible = false">{{ t('email.email.cancel') }}</el-button>
                <el-button type="primary" @click="updateEmailConfig" :loading="updatingEmail">
                  {{ t('email.email.verify.now') }}
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>

        <!-- 使用说明 Tab -->
        <div v-if="activeTab === 'emailGuide'" class="tab-content email-guide-container">
          <div class="guide-header">
            <h2>{{ t('email.guide.title') }}</h2>
            <p class="guide-subtitle">{{ t('email.guide.subtitle') }}</p>
          </div>

          <!-- 支持邮箱类型 -->
          <div class="guide-section">
            <h3 class="section-title">{{ t('email.guide.supportedTypes') }}</h3>
            <div class="section-content">
              <p>{{ t('email.guide.supportedList') }}</p>
              <div class="important-note">
                <el-icon><WarningFilled /></el-icon>
                <span><strong>{{ t('email.guide.importantPrinciple') }}</strong></span>
              </div>
            </div>
          </div>

          <!-- Outlook OAuth 2.0 -->
          <div class="guide-section">
            <div class="section-header-with-badge">
              <h3 class="section-title">{{ t('email.guide.outlook.title') }}</h3>
              <span class="badge-recommended">{{ t('email.guide.recommended') }}</span>
            </div>
            <div class="section-content">
              <div class="subsection">
                <h4>{{ t('email.guide.coreLogic') }}</h4>
                <p>{{ t('email.guide.outlook.logic') }}</p>
                <p class="text-muted">{{ t('email.guide.outlook.applicable') }}</p>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.operationSteps') }}</h4>
                <ol class="steps-list">
                  <li><span class="step-number">1</span><span>{{ t('email.guide.outlook.step1') }}</span></li>
                  <li><span class="step-number">2</span><span>{{ t('email.guide.outlook.step2') }}</span></li>
                  <li><span class="step-number">3</span><span>{{ t('email.guide.outlook.step3') }}</span></li>
                  <li><span class="step-number">4</span><span>{{ t('email.guide.outlook.step4') }}</span></li>
                </ol>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.precautions') }}</h4>
                <ul class="notes-list">
                  <li><strong>{{ t('email.guide.outlook.note1') }}</strong></li>
                  <li><strong>{{ t('email.guide.outlook.note2') }}</strong></li>
                </ul>
              </div>
            </div>
          </div>

          <!-- QQ 邮箱 -->
          <div class="guide-section">
            <h3 class="section-title">{{ t('email.guide.qq.title') }}</h3>
            <div class="section-content">
              <div class="subsection">
                <h4>{{ t('email.guide.operationSteps') }}</h4>
                <ol class="steps-list">
                  <li><span class="step-number">1</span><span>{{ t('email.guide.qq.step1') }}</span></li>
                  <li><span class="step-number">2</span><span>{{ t('email.guide.qq.step2') }}</span></li>
                  <li><span class="step-number">3</span><span>{{ t('email.guide.qq.step3') }}</span></li>
                </ol>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.configParams') }}</h4>
                <table class="config-table">
                  <tr>
                    <td class="param-name">{{ t('email.guide.mailboxAccount') }}</td>
                    <td>{{ t('email.guide.qq.account') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.password') }}</td>
                    <td>{{ t('email.guide.qq.password') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.imap') }}</td>
                    <td>{{ t('email.guide.qq.imap') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.smtp') }}</td>
                    <td>{{ t('email.guide.qq.smtp') }}</td>
                  </tr>
                </table>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.commonIssues') }}</h4>
                <ul class="notes-list">
                  <li><strong>{{ t('email.guide.qq.issue1') }}</strong></li>
                  <li><strong>{{ t('email.guide.qq.issue2') }}</strong></li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 163/126 邮箱 -->
          <div class="guide-section">
            <h3 class="section-title">{{ t('email.guide.163.title') }}</h3>
            <div class="section-content">
              <div class="subsection">
                <h4>{{ t('email.guide.operationSteps') }}</h4>
                <ol class="steps-list">
                  <li><span class="step-number">1</span><span>{{ t('email.guide.163.step1') }}</span></li>
                  <li><span class="step-number">2</span><span>{{ t('email.guide.163.step2') }}</span></li>
                  <li><span class="step-number">3</span><span>{{ t('email.guide.163.step3') }}</span></li>
                </ol>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.configParams') }}</h4>
                <table class="config-table">
                  <tr>
                    <td class="param-name">{{ t('email.guide.mailboxAccount') }}</td>
                    <td>{{ t('email.guide.163.account') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.password') }}</td>
                    <td>{{ t('email.guide.163.password') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.imap') }}</td>
                    <td>{{ t('email.guide.163.imap') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.smtp') }}</td>
                    <td>{{ t('email.guide.163.smtp') }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>

          <!-- Gmail -->
          <div class="guide-section">
            <h3 class="section-title">{{ t('email.guide.gmail.title') }}</h3>
            <div class="section-content">
              <div class="subsection">
                <h4>{{ t('email.guide.gmail.prerequisite') }}</h4>
                <p>{{ t('email.guide.gmail.prerequisite.text') }}</p>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.operationSteps') }}</h4>
                <ol class="steps-list">
                  <li><span class="step-number">1</span><span>{{ t('email.guide.gmail.step1') }}</span></li>
                  <li><span class="step-number">2</span><span>{{ t('email.guide.gmail.step2') }}</span></li>
                  <li><span class="step-number">3</span><span>{{ t('email.guide.gmail.step3') }}</span></li>
                </ol>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.configParams') }}</h4>
                <table class="config-table">
                  <tr>
                    <td class="param-name">{{ t('email.guide.mailboxAccount') }}</td>
                    <td>{{ t('email.guide.gmail.account') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.password') }}</td>
                    <td>{{ t('email.guide.gmail.password') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.imap') }}</td>
                    <td>{{ t('email.guide.gmail.imap') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.smtp') }}</td>
                    <td>{{ t('email.guide.gmail.smtp') }}</td>
                  </tr>
                </table>
              </div>

              <div class="subsection">
                <div class="tip-box">
                  <el-icon><InfoFilled /></el-icon>
                  <span>{{ t('email.guide.gmail.tip') }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Yahoo 邮箱 -->
          <div class="guide-section">
            <h3 class="section-title">{{ t('email.guide.yahoo.title') }}</h3>
            <div class="section-content">
              <div class="subsection">
                <h4>{{ t('email.guide.operationSteps') }}</h4>
                <ol class="steps-list">
                  <li><span class="step-number">1</span><span>{{ t('email.guide.yahoo.step1') }}</span></li>
                  <li><span class="step-number">2</span><span>{{ t('email.guide.yahoo.step2') }}</span></li>
                  <li><span class="step-number">3</span><span>{{ t('email.guide.yahoo.step3') }}</span></li>
                </ol>
              </div>

              <div class="subsection">
                <h4>{{ t('email.guide.configParams') }}</h4>
                <table class="config-table">
                  <tr>
                    <td class="param-name">{{ t('email.guide.mailboxAccount') }}</td>
                    <td>{{ t('email.guide.yahoo.account') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.password') }}</td>
                    <td>{{ t('email.guide.yahoo.password') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.imap') }}</td>
                    <td>{{ t('email.guide.yahoo.imap') }}</td>
                  </tr>
                  <tr>
                    <td class="param-name">{{ t('email.guide.smtp') }}</td>
                    <td>{{ t('email.guide.yahoo.smtp') }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>

          <!-- 完成提示 -->
          <div class="guide-section guide-footer">
            <p>{{ t('email.guide.footer') }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 在组件模板中添加设备码授权弹窗 -->

  <!-- 导入收件人对话框 -->
  <el-dialog
      v-model="importRecipientsVisible"
      :title="t('email.import.recipients')"
      width="500px"
  >
    <div class="import-recipients-dialog">
      <div class="import-description">
        {{ t('email.import.description') }}
      </div>

      <el-upload
          class="upload-excel"
          drag
          action="#"
          :auto-upload="false"
          :on-change="handleImportFileChange"
          :limit="1"
          accept=".xlsx, .xls"
      >
        <el-icon class="el-icon--upload">
          <Upload/>
        </el-icon>
        <div class="el-upload__text">
          {{ t('email.upload.drag') }}
          <em>{{ t('email.upload.click') }}</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            {{ t('email.upload.tip') }}
          </div>
        </template>
      </el-upload>

      <div v-if="importPreview.length > 0" class="import-preview">
        <h4>{{ t('email.preview') }}</h4>
        <div class="preview-list">
          <div v-for="(email, index) in importPreview.slice(0, 5)" :key="index" class="preview-item">
            {{ email }}
          </div>
          <div v-if="importPreview.length > 5" class="preview-more">
            {{ t('email.preview.more', {count: importPreview.length - 5}) }}
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importRecipientsVisible = false">
          {{ t('common.cancel') }}
        </el-button>
        <el-button
            type="primary"
            @click="confirmImportRecipients"
            :disabled="importPreview.length === 0"
            :loading="importingRecipients"
        >
          {{ t('email.import.confirm') }}
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {ref, reactive, onMounted, computed, watch, onBeforeUnmount} from 'vue'
import {
  Message,
  ChatDotSquare,
  ChatLineSquare,
  WarningFilled,
  DataLine,
  Document,
  Upload,
  Check,
  User,
  Picture,
  Grid,
  Reading,
  FolderOpened,
  View,
  Download
} from '@element-plus/icons-vue'
import * as XLSX from 'xlsx' // 导入XLSX库处理Excel文件
import MainHeader from '@/components/MainHeader.vue'
import SideMenu from '@/components/SideMenu.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {use} from 'echarts/core'
import {CanvasRenderer} from 'echarts/renderers'
import {PieChart, LineChart} from 'echarts/charts'
import {TitleComponent, TooltipComponent, LegendComponent, GridComponent} from 'echarts/components'
import VChart from 'vue-echarts'
import {t, getCurrentLanguage, addTranslation} from '@/utils/i18n'
import {
  getEmailPackages, getEmailQuota, getEmailSendRecords,
  sendEmail as sendEmailApi, deleteEmailRecord as deleteEmailRecordApi,
  sendEmailJson, scheduleSendEmail, scheduleSendEmailJson, getAllEmailSendRecords,
  verifyEmailCredentials, saveUserEmail, getUserEmail, getVerifiedEmails,
  sendCustomEmail, sendCustomEmailWithAttachments, getAllUserEmails, addUserEmail,
  deleteUserEmail, updateUserEmail, downloadAttachment, getAttachmentPreviewUrl
} from '@/api/email'

// 注册必要的 ECharts 组件
use([
  CanvasRenderer,
  PieChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// Tab 相关数据 - 临时注释掉域名配置和模板功能
// 定义tabs配置
const tabs = [
  {name: 'sendRecord', label: '发送记录'},
  {name: 'sendEmail', label: '发邮件'},
  // {name: 'templates', label: '邮件模板'}, // 临时注释掉模板功能
  // {name: 'domains', label: '域名配置'}, // 临时注释掉域名配置功能
  {name: 'emailConfig', label: '邮箱配置'},
  {name: 'emailGuide', label: '使用说明'}
]
const activeTab = ref('sendRecord')

// 使用说明标签页语言切换
const guideLanguage = ref('zh') // 'zh' 中文, 'en' 英文

// 发送记录Tab数据
const dateRange = ref('all')
const hasData = ref(false)
const listTab = ref('all')
const hasEmails = ref(false)
const emailRecords = ref([]) // 分页的邮件记录 - 用于表格显示
const allEmailRecords = ref([]) // 所有邮件记录 - 用于图表和统计
const currentRecord = ref(null)
const recordDetailVisible = ref(false)

// 图表相关数据
const chartPeriod = ref('week')
const pieChartOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['成功', '失败']
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 0, name: '成功', itemStyle: {color: '#19be6b'}},
        {value: 0, name: '失败', itemStyle: {color: '#ff4d51'}}
      ]
    }
  ]
})

// 这里之前有重复声明的邮件详情相关计算属性
// 我们将使用在文件后面定义的同名属性，这里不再重复声明

const lineChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['成功', '失败'],
    bottom: 0
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    top: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '成功',
      type: 'line',
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 0, color: 'rgba(25, 190, 107, 0.5)'},
            {offset: 1, color: 'rgba(25, 190, 107, 0.1)'}
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#19be6b'
      },
      data: []
    },
    {
      name: '失败',
      type: 'line',
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 0, color: 'rgba(255, 77, 81, 0.5)'},
            {offset: 1, color: 'rgba(255, 77, 81, 0.1)'}
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#ff4d51'
      },
      data: []
    }
  ]
})

// 发邮件Tab数据
const emailForm = reactive({
  sender: '',  // 移除默认发件人邮箱，让用户自行选择
  recipients: '',
  replyTo: '',
  templateId: '',
  subject: '',
  content: '',
  sendType: 'immediate',
  scheduledDate: '',
  timezone: 'auto',
  attachments: [],
  contentType: 'custom'
})

// 临时注释掉邮件模板相关数据
// const templateType = ref('system')
// const hasTemplates = ref(false)
// const templates = ref([])
// const filteredTemplates = computed(() => {
//   return templates.value.filter(template => template.type === templateType.value)
// })
// const selectedTemplates = ref([])
// const templatesLoading = ref(false)

// 临时注释掉域名配置相关数据
// const hasDomains = ref(false)
// const domains = ref([])
// const domainList = ref([]) // 添加域名列表变量，与domains保持同步
// const domainsLoading = ref(false) // 添加域名加载状态变量
const savedEmails = ref([]) // 保留用户保存的邮箱列表，邮箱配置功能需要使用
// const domainStatusMap = {
//   'verified': t('email.domain.status.verified'),
//   'pending': t('email.domain.status.pending'),
//   'failed': t('email.domain.status.failed')
// }

// 临时注释掉添加域名对话框相关数据
// const domainDialogVisible = ref(false) // 修改为domainDialogVisible以匹配模板中的变量名
// const domainForm = reactive({
//   domain: '',
//   description: ''
// })

// 域名验证对话框相关数据
const verifyDomainDialogVisible = ref(false)
const verifyingDomain = ref(false) // 添加验证中状态
const addingDomain = ref(false) // 添加添加域名中状态

// 邮箱配置相关数据
const emailConfigDialogVisible = ref(false)
const emailConfigForm = reactive({
  emailAddress: '',
  emailProvider: '', // 添加邮箱发行商字段
  // Outlook OAuth认证字段
  clientId: '',
  tenantId: '',
  redirectUri: '',
  clientSecret: ''
})
const addingEmailConfig = ref(false)
const currentVerifyingEmail = ref(null)
const verifyEmailDialogVisible = ref(false)
const emailVerificationForm = reactive({
  emailAddress: '',
  authCode: ''
})
const verifyingEmail = ref(false)
const verifiedEmails = ref([]) // 存储已验证的邮箱列表，用于发件人选择

// 修改邮箱配置相关数据
const editEmailDialogVisible = ref(false)
const updatingEmail = ref(false)
const editEmailForm = reactive({
  id: '',
  emailAddress: '',
  emailPassword: '',
  emailProvider: '',
  status: 0,
  clientId: '',
  tenantId: '',
  redirectUri: '',
  clientSecret: ''
})

// 添加Outlook OAuth认证相关数据
const outlookOAuthDialogVisible = ref(false)
const outlookOAuthForm = reactive({
  clientId: '',
  tenantId: '',
  redirectUri: '',
  clientSecret: ''
})

// 邮箱状态常量
const EMAIL_STATUS = {
  PENDING: 0,
  VERIFIED: 1,
  FAILED: 0
}
const verifyDomainInfo = reactive({ // 添加验证域名信息对象
  host: '',
  value: ''
})
const currentDomain = ref({})

// 临时注释掉模板对话框相关数据
// const templateDialogVisible = ref(false)
// const editingTemplate = ref(false)
// const viewingTemplate = ref(false)
// const templateForm = reactive({
//   id: '',
//   name: '',
//   subject: '',
//   content: '',
//   type: 'personal',
//   createTime: '',
//   creator: '当前用户'
// })

// 发送邮件相关数据
const sendingEmail = ref(false)
const emailEditor = ref(null)

// 清理邮箱相关缓存数据
const clearEmailCache = () => {
  // 清理localStorage中的邮箱相关数据
  localStorage.removeItem('userEmails')
  localStorage.removeItem('emailDomains')
  localStorage.removeItem('emailTemplates')
  localStorage.removeItem('emailRecords')

  // 重置组件状态
  savedEmails.value = []
  verifiedEmails.value = []
  // 域名相关变量已被注释掉，所以不需要重置
  // domains.value = []
  // domainList.value = []
  // templates.value = []
  emailRecords.value = []
  allEmailRecords.value = []

}

// 检查用户是否切换
const checkUserChange = () => {
  const currentToken = localStorage.getItem('token')
  const lastToken = localStorage.getItem('lastEmailToken')

  // 如果token发生变化，说明用户切换了
  if (currentToken !== lastToken) {
    clearEmailCache()
    // 保存当前token
    localStorage.setItem('lastEmailToken', currentToken || '')
    return true
  }
  return false
}

// 在组件挂载时加载数据
onMounted(() => {
  // 确保默认显示发送记录标签页
  activeTab.value = 'sendRecord'

  // 添加收件人导入相关翻译
  addTranslation('email.form.import.recipients', {
    zh: '导入收件人',
    en: 'Import Recipients'
  })

  addTranslation('email.import.recipients.title', {
    zh: '导入收件人',
    en: 'Import Recipients'
  })

  addTranslation('email.import.recipients.description', {
    zh: '请上传包含收件人邮箱地址的Excel文件。系统将自动提取文件中的有效邮箱地址。',
    en: 'Please upload an Excel file containing recipient email addresses. The system will automatically extract valid email addresses.'
  })

  addTranslation('email.import.recipients.drag', {
    zh: '拖拽文件到此处或',
    en: 'Drop file here or'
  })

  addTranslation('email.import.recipients.click', {
    zh: '点击上传',
    en: 'click to upload'
  })

  addTranslation('email.import.recipients.tip', {
    zh: '仅支持 .xlsx, .xls 格式文件',
    en: 'Only .xlsx, .xls files are supported'
  })

  addTranslation('email.import.recipients.preview', {
    zh: '预览 (前5个):',
    en: 'Preview (first 5):'
  })

  addTranslation('email.import.recipients.more', {
    zh: '还有 {count} 个邮箱...',
    en: '{count} more emails...'
  })

  addTranslation('email.import.recipients.cancel', {
    zh: '取消',
    en: 'Cancel'
  })

  addTranslation('email.import.recipients.confirm', {
    zh: '确认导入',
    en: 'Confirm Import'
  })

  addTranslation('email.import.recipients.success', {
    zh: '成功导入 {count} 个收件人',
    en: 'Successfully imported {count} recipients'
  })

  addTranslation('email.import.recipients.error', {
    zh: '导入收件人时出错',
    en: 'Error importing recipients'
  })

  addTranslation('email.import.recipients.format.error', {
    zh: '请上传Excel格式的文件',
    en: 'Please upload an Excel format file'
  })

  addTranslation('email.import.recipients.parse.error', {
    zh: '解析Excel文件失败',
    en: 'Failed to parse Excel file'
  })

  addTranslation('email.import.recipients.no.emails', {
    zh: '未发现有效的邮箱地址',
    en: 'No valid email addresses found'
  })

  addTranslation('email.form.attachment.limit', {
    zh: '支持上传最多5个附件，单个文件不超过10MB',
    en: 'Support uploading up to 5 attachments, single file should not exceed 10MB'
  })

  addTranslation('email.form.attachment.size.limit', {
    zh: '附件大小不能超过10MB',
    en: 'Attachment size cannot exceed 10MB'
  })

  // 检查用户是否切换，如果切换则清理缓存
  const userChanged = checkUserChange()

  // 立即触发API请求，加载邮箱发送记录和统计数据
  loadEmailRecords()
  loadAllEmailRecords()

  // 加载域名和模板数据，如果用户切换则强制刷新
  // loadDomains(userChanged) // 临时注释掉域名配置功能
  // loadTemplates(userChanged) // 临时注释掉模板功能

  // 加载用户保存的邮箱配置，如果用户切换则强制刷新
  loadSavedEmails(userChanged)

  // 设置默认日期范围为全部
  setDateRange('all')

  // 添加延迟检查，确保数据加载成功
  setTimeout(() => {
    if (emailRecords.value.length === 0 && !loading.value) {
      loadEmailRecords()
      loadAllEmailRecords()
    }
  }, 1000)

  // 初始化编辑器，确保内容正确显示
  if (emailEditor.value && emailForm.content) {
    emailEditor.value.innerHTML = emailForm.content
  }

  if (userChanged) {
  }
})

// 监听标签页切换，根据标签页类型加载相应数据
watch(activeTab, (newTab) => {
  if (newTab === 'sendRecord') {
    // 切换到发送记录标签页时，刷新数据
    loadEmailRecords()
    loadAllEmailRecords()
  } else if (newTab === 'emailConfig') {
    // 切换到邮箱配置标签页时，刷新数据
    loadSavedEmails(true) // 强制刷新
  }
})

// 添加加载所有邮件记录的函数
const loadAllEmailRecords = () => {

  // 设置请求超时
  const timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('请求超时')), 10000);
  });

  // 执行实际请求
  const fetchPromise = getAllEmailSendRecords();

  // 使用Promise.race竞争，谁先完成就用谁的结果
  Promise.race([fetchPromise, timeoutPromise])
      .then(response => {
        if (response.code === 200 && response.data) {
          // 确保allEmailRecords已初始化
          if (allEmailRecords) {
            allEmailRecords.value = response.data || []

            // 更新统计数据
            updateEmailStats(allEmailRecords.value)

            // 更新图表数据
            updateChartData()
          }
        } else {
          if (allEmailRecords) {
            allEmailRecords.value = []
          }
          resetChartData()
          updateEmailStats([])
        }
      })
      .catch(error => {
        if (typeof ElMessage !== 'undefined') {
          if (error.message === '请求超时') {
            if (getCurrentLanguage() === 'zh') {
              ElMessage.error('获取邮件统计数据超时，请检查网络连接')
            } else {
              ElMessage.error('Failed to get email statistics data, please check your network connection')
            }
          } else {
            if (getCurrentLanguage() === 'zh') {
              ElMessage.error('获取邮件统计数据失败')
            } else {
              ElMessage.error('Failed to get email statistics data')
            }
          }
        }
        if (allEmailRecords) {
          allEmailRecords.value = []
        }
        resetChartData()
        updateEmailStats([])
      })
}

// 添加测试数据函数修改，不再添加测试数据
const addTestDataIfEmpty = () => {
}

// 方法
const loadDomains = (forceRefresh = false) => {
  domainsLoading.value = true

  // 获取当前用户token用于用户隔离
  const currentToken = localStorage.getItem('token')
  const userKey = currentToken ? `emailDomains_${currentToken.substring(0, 10)}` : 'emailDomains'

  // 如果强制刷新，清除缓存
  if (forceRefresh) {
    localStorage.removeItem(userKey)
  }

  const savedDomains = localStorage.getItem(userKey)
  if (savedDomains && !forceRefresh) {
    try {
      const parsedDomains = JSON.parse(savedDomains)
      domains.value = parsedDomains

      // 初始化domainList，转换状态值为国际化格式
      domainList.value = parsedDomains.map(domain => ({
        ...domain,
        status: domain.status === '已验证' ? 'verified' :
            domain.status === '待验证' ? 'pending' : 'failed',
        isDefault: domain.isDefault || false,
        addTime: domain.createTime
      }))

    } catch (error) {
      domains.value = []
      domainList.value = []
    }
  } else {
    // 初始化默认域名配置
    domains.value = []
    domainList.value = []
  }

  // 检查是否存在shuhailinghang.cn域名，如果不存在则添加
  const hasDomain = domains.value.some(item => item.domain === 'shuhailinghang.cn')
  if (!hasDomain) {
    const newDomain = {
      id: 'dom_' + Date.now(),
      domain: 'shuhailinghang.cn',
      status: 'verified',
      isDefault: true,
      addTime: new Date().toLocaleString(),
    }
    domains.value.push(newDomain)
    domainList.value.push(newDomain)
    saveDomainsToStorage()
  }

  domainsLoading.value = false
}

// 初始化默认域名
const initDefaultDomain = () => {
  const defaultDomain = {
    id: 'dom_' + Date.now(),
    domain: 'shuhailinghang.cn',
    status: 'verified',
    isDefault: true,
    addTime: new Date().toLocaleString(),
  }
  domains.value = [defaultDomain]
  domainList.value = [defaultDomain]
  // 保存到本地存储
  saveDomainsToStorage()
}

const saveDomainsToStorage = () => {
  try {
    // 获取当前用户token用于用户隔离
    const currentToken = localStorage.getItem('token')
    const userKey = currentToken ? `emailDomains_${currentToken.substring(0, 10)}` : 'emailDomains'

    // 保存域名数据到localStorage，按用户隔离
    localStorage.setItem(userKey, JSON.stringify(domains.value))
  } catch (error) {
    if (getCurrenLanguage() === 'zh') {
      ElMessage.error('保存域名数据失败')
    } else {
      ElMessage.error('Failed to save domain data')
    }
  }
}

const showAddDomainDialog = () => {
  domainForm.domain = ''
  domainForm.description = ''
  domainDialogVisible.value = true
}

const addDomain = () => {
  if (!domainForm.domain.trim()) {
    ElMessage.error(t('email.domain.error.empty'))
    return
  }

  // 检查域名格式
  const domainRegex = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$/
  if (!domainRegex.test(domainForm.domain.trim())) {
    ElMessage.error(t('email.domain.error.format'))
    return
  }

  // 检查是否已存在相同域名
  if (domains.value.some(item => item.domain === domainForm.domain.trim())) {
    ElMessage.error(t('email.domain.error.exists'))
    return
  }

  addingDomain.value = true

  // 创建新域名对象
  const newDomain = {
    id: 'dom_' + Date.now(),
    domain: domainForm.domain.trim(),
    status: 'pending', // 新添加的域名需要验证
    isDefault: false,
    addTime: new Date().toLocaleString()
  }

  // 添加到域名列表
  domains.value.push(newDomain)
  domainList.value.push(newDomain)

  // 保存到本地存储
  saveDomainsToStorage()

  // 关闭对话框
  domainDialogVisible.value = false
  addingDomain.value = false

  // 提示成功
  ElMessage.success(t('email.domain.add.success'))

  // 自动打开验证对话框
  setTimeout(() => {
    showVerifyDomainDialog(newDomain)
  }, 500)
}

const showVerifyDomainDialog = (domain) => {
  currentDomain.value = domain

  // 设置验证信息
  verifyDomainInfo.host = `_domainkey.${domain.domain}`
  verifyDomainInfo.value = `verify-${domain.id}`

  // 显示验证对话框
  verifyDomainDialogVisible.value = true
}

const verifyDomain = () => {
  // 模拟验证过程
  verifyingDomain.value = true

  setTimeout(() => {
    // 模拟验证成功
    const domainIndex = domains.value.findIndex(item => item.id === currentDomain.value.id)
    const domainListIndex = domainList.value.findIndex(item => item.id === currentDomain.value.id)

    if (domainIndex !== -1) {
      // 更新域名状态
      domains.value[domainIndex].status = 'verified'
      if (domainListIndex !== -1) {
        domainList.value[domainListIndex].status = 'verified'
      }

      // 保存到本地存储
      saveDomainsToStorage()

      // 关闭对话框
      verifyDomainDialogVisible.value = false

      // 提示成功
      ElMessage.success(t('email.domain.verify.success'))
    }

    verifyingDomain.value = false
  }, 1500)
}

const toggleDefaultDomain = (domain) => {
  // 只有已验证的域名可以设为默认
  if (domain.status !== 'verified') {
    ElMessage.warning(t('email.domain.error.not.verified'))
    return
  }

  // 更新默认域名
  domains.value.forEach(item => {
    item.isDefault = item.id === domain.id
  })

  domainList.value.forEach(item => {
    item.isDefault = item.id === domain.id
  })

  // 保存到本地存储
  saveDomainsToStorage()

  // 提示成功
  ElMessage.success(t('email.domain.default.success'))
}

const deleteDomain = (domain) => {
  // 不允许删除默认域名
  if (domain.isDefault) {
    ElMessage.warning(t('email.domain.error.delete.default'))
    return
  }

  // 确认删除
  ElMessageBox.confirm(
      t('email.domain.delete.confirm'),
      t('email.domain.delete.title'),
      {
        confirmButtonText: t('email.domain.delete.yes'),
        cancelButtonText: t('email.domain.delete.no'),
        type: 'warning'
      }
  ).then(() => {
    // 移除域名
    domains.value = domains.value.filter(item => item.id !== domain.id)
    domainList.value = domainList.value.filter(item => item.id !== domain.id)

    // 保存到本地存储
    saveDomainsToStorage()

    // 提示成功
    ElMessage.success(t('email.domain.delete.success'))
  }).catch(() => {
    // 用户取消删除，不做任何处理
  })
}

// 复制文本到剪贴板
const copyText = (text) => {
  try {
    navigator.clipboard.writeText(text).then(() => {
      ElMessage.success(t('email.domain.copy.success'))
    })
  } catch (error) {
    ElMessage.error(t('email.domain.copy.failed'))
  }
}

// 临时注释掉加载模板相关方法
// const loadTemplates = (forceRefresh = false) => {
//   templatesLoading.value = true
//
//   // 获取当前用户token用于用户隔离
//   const currentToken = localStorage.getItem('token')
//   const userKey = currentToken ? `emailTemplates_${currentToken.substring(0, 10)}` : 'emailTemplates'
//
//   // 如果强制刷新，清除缓存
//   if (forceRefresh) {
//     localStorage.removeItem(userKey)
//     console.log('强制刷新模板配置，清除缓存')
//   }
//
//   const savedTemplates = localStorage.getItem(userKey)
//
//   setTimeout(() => {
//     if (savedTemplates && !forceRefresh) {
//       try {
//         templates.value = JSON.parse(savedTemplates)
//         console.log('从缓存加载模板配置，数量:', templates.value.length)
//       } catch (error) {
//         console.error('解析模板缓存数据失败:', error)
//         templates.value = []
//       }
//     } else {
//       // 为空时不添加示例数据
//       console.log('初始化空模板配置')
//       templates.value = []
//       saveTemplatesToStorage()
//     }
//     templatesLoading.value = false
//   }, 300)
// }
//
// const saveTemplatesToStorage = () => {
//   try {
//     // 获取当前用户token用于用户隔离
//     const currentToken = localStorage.getItem('token')
//     const userKey = currentToken ? `emailTemplates_${currentToken.substring(0, 10)}` : 'emailTemplates'
//
//     // 保存模板数据到localStorage，按用户隔离
//     localStorage.setItem(userKey, JSON.stringify(templates.value))
//     console.log('模板配置已保存，用户key:', userKey)
//   } catch (error) {
//     console.error('保存模板数据时出错:', error)
//     ElMessage.error('保存模板数据失败')
//   }
// }

const showNewTemplateDialog = () => {
  // 系统模板无法新建
  if (templateType.value === 'system') {
    return
  }

  // 重置表单
  editingTemplate.value = false
  viewingTemplate.value = false
  templateForm.id = ''
  templateForm.name = ''
  templateForm.subject = ''
  templateForm.content = ''
  templateForm.type = 'personal'
  templateDialogVisible.value = true
}

const editTemplate = (template) => {
  // 系统模板无法编辑
  if (template.type === 'system') {
    return
  }

  editingTemplate.value = true
  viewingTemplate.value = false
  templateForm.id = template.id
  templateForm.name = template.name
  templateForm.subject = template.subject
  templateForm.content = template.content
  templateForm.type = template.type
  templateDialogVisible.value = true
}

const viewTemplate = (template) => {
  viewingTemplate.value = true
  editingTemplate.value = false
  templateForm.id = template.id
  templateForm.name = template.name
  templateForm.subject = template.subject
  templateForm.content = template.content
  templateForm.type = template.type
  templateDialogVisible.value = true
}

const saveTemplate = () => {
  // 验证表单
  if (!templateForm.name.trim()) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请输入模板名称')
    } else {
      ElMessage.error('Please enter template name')
    }
    return
  }

  if (!templateForm.subject.trim()) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请输入模板主题')
    } else {
      ElMessage.error('Please enter template subject')
    }
    return
  }

  if (!templateForm.content.trim()) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请输入模板内容')
    } else {
      ElMessage.error('Please enter template content')
    }
    return
  }

  if (editingTemplate.value) {
    // 更新现有模板
    const index = templates.value.findIndex(item => item.id === templateForm.id)
    if (index !== -1) {
      templates.value[index].name = templateForm.name
      templates.value[index].subject = templateForm.subject
      templates.value[index].content = templateForm.content
    }
  } else {
    // 创建新模板
    const newTemplate = {
      id: 'tpl_' + Date.now(),
      name: templateForm.name,
      subject: templateForm.subject,
      content: templateForm.content,
      type: templateForm.type,
      createTime: new Date().toLocaleString(),
      creator: '当前用户'
    }
    templates.value.push(newTemplate)
  }

  // 保存到本地存储
  saveTemplatesToStorage()

  // 关闭对话框
  templateDialogVisible.value = false

  // 提示成功
  if (getCurrentLanguage() === 'zh') {
    ElMessage.success(editingTemplate.value ? '模板更新成功' : '模板创建成功')
  } else {
    ElMessage.success(editingTemplate.value ? 'Template updated successfully' : 'Template created successfully')
  }
}

const deleteTemplate = (template) => {
  ElMessageBox.confirm(
      `确定要删除模板 "${template.name}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 从列表中删除模板
        templates.value = templates.value.filter(item => item.id !== template.id)

        // 保存到本地存储
        saveTemplatesToStorage()

        // 提示成功
        ElMessage.success('模板删除成功')
      })
      .catch(() => {
        // 用户取消删除
      })
}

const handleSelectionChange = (selection) => {
  // 只允许选择非系统模板
  selectedTemplates.value = selection.filter(item => item.type !== 'system')
}

const batchDeleteTemplates = () => {
  if (selectedTemplates.value.length === 0 || templateType.value === 'system') {
    return
  }

  ElMessageBox.confirm(
      `确定要删除选中的 ${selectedTemplates.value.length} 个模板吗？`,
      '批量删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 获取选中模板的ID
        const selectedIds = selectedTemplates.value.map(item => item.id)

        // 从列表中删除选中模板 (确保不删除系统模板)
        templates.value = templates.value.filter(item => !selectedIds.includes(item.id) || item.type === 'system')

        // 保存到本地存储
        saveTemplatesToStorage()

        // 清空选中
        selectedTemplates.value = []

        // 提示成功
        ElMessage.success('模板删除成功')
      })
      .catch(() => {
        // 用户取消删除
      })
}

// 计算属性
const verifiedDomains = computed(() => {
  return domains.value.filter(domain => domain.status === '已验证')
})

// 临时注释掉模板相关的computed属性
// const systemTemplates = computed(() => {
//   return templates.value.filter(template => template.type === 'system')
// })
//
// const personalTemplates = computed(() => {
//   return templates.value.filter(template => template.type === 'personal')
// })

// 发送邮件相关方法
// 临时注释掉模板相关的处理函数
// const handleContentTypeChange = () => {
//   emailForm.templateId = ''
//
//   if (emailForm.contentType === 'custom') {
//     // 如果选择自定义，清空内容以便用户输入
//     emailForm.content = ''
//     if (emailEditor.value) {
//       emailEditor.value.innerHTML = ''
//       emailEditor.value.contentEditable = 'true'
//     }
//   }
// }
//
// const handleTemplateChange = () => {
//   if (!emailForm.templateId) return
//
//   const selectedTemplate = templates.value.find(template => template.id === emailForm.templateId)
//   if (selectedTemplate) {
//     emailForm.subject = selectedTemplate.subject
//     emailForm.content = selectedTemplate.content
//
//     // 如果有编辑器引用，更新其内容
//     if (emailEditor.value) {
//       emailEditor.value.innerHTML = selectedTemplate.content
//
//       // 如果使用的是模板，设置编辑器为只读状态
//       emailEditor.value.contentEditable = emailForm.contentType === 'custom' ? 'true' : 'false'
//     }
//   }
// }

const updateEmailContent = (event) => {
  // 直接更新emailForm.content，不需要再次更新DOM
  emailForm.content = event.target.innerHTML
}

const disablePastDates = (date) => {
  return date < new Date(new Date().setHours(0, 0, 0, 0))
}

const handleFileChange = (file, fileList) => {
  // Check if file size exceeds 10MB (10 * 1024 * 1024 bytes)
  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes

  if (file.size > MAX_FILE_SIZE) {
    ElMessage.error(t('email.form.attachment.size.limit'));
    // Remove the file that exceeds the size limit
    const index = fileList.indexOf(file);
    if (index !== -1) {
      fileList.splice(index, 1);
    }
  }

  emailForm.attachments = fileList;
}

const handleFileRemove = (file, fileList) => {
  emailForm.attachments = fileList
}

const resetEmailForm = () => {
  // emailForm.sender = '2209339094@shuhailinghang.cn' // 移除默认发件人邮箱设置
  emailForm.sender = '' // 重置为空，让用户自行选择
  emailForm.recipients = ''
  emailForm.replyTo = ''
  emailForm.templateId = ''
  emailForm.subject = ''
  emailForm.content = ''
  emailForm.sendType = 'immediate'
  emailForm.scheduledDate = ''
  emailForm.timezone = 'auto'
  emailForm.attachments = []
  emailForm.contentType = 'custom'

  if (emailEditor.value) {
    emailEditor.value.innerHTML = ''
    emailEditor.value.contentEditable = 'true'
  }

  // 自动切换到发送记录页面
  setTimeout(() => {
    activeTab.value = 'sendRecord'
  }, 1000)
}

// 临时注释掉保存为模板功能
// const saveAsTemplate = () => {
//   if (!emailForm.subject.trim() || !emailForm.content.trim()) {
//     ElMessage.error('请输入邮件主题和内容')
//     return
//   }
//
//   // 直接创建新模板并添加到模板列表
//   const newTemplateId = 'tpl_' + Date.now()
//   const newTemplate = {
//     id: newTemplateId,
//     name: emailForm.subject,  // 使用当前主题作为默认模板名称
//     subject: emailForm.subject,
//     content: emailForm.content,
//     type: 'personal',
//     createTime: new Date().toLocaleString(),
//     creator: '当前用户'
//   }
//
//   // 添加到模板列表
//   templates.value.push(newTemplate)
//
//   // 保存到本地存储
//   saveTemplatesToStorage()
//
//   // 提示成功
//   ElMessage.success('已成功保存为模板')
//
//   // 自动切换到模板tab并显示个人模板
//   setTimeout(() => {
//     activeTab.value = 'templates'
//     templateType.value = 'personal'
//   }, 500)
// }

const sendEmail = async () => {
  // 表单验证
  if (!emailForm.recipients) {
    ElMessage.error(t('email.send.error.recipient'))
    return
  }
  if (!emailForm.subject) {
    ElMessage.error(t('email.send.error.subject'))
    return
  }
  if (!emailForm.content) {
    ElMessage.error(t('email.send.error.content'))
    return
  }

  // 检查是否有足够的邮件余额
  if (emailQuota.value.emailSendRemaining <= 0) {
    ElMessage.error(t('email.send.error.quota'))
    return
  }

  sendingEmail.value = true

  try {
    // 判断是否使用自定义邮箱发送
    const useCustomEmail = emailForm.sender && emailForm.sender !== t('email.send.form.sender.default')

    // 检查是否有附件
    if (emailForm.attachments.length > 0) {
      // 构建 FormData
      const formData = new FormData()

      // 判断是使用系统邮箱还是自定义邮箱发送
      if (useCustomEmail) {
        // 使用自定义邮箱发送
        formData.append('senderEmail', emailForm.sender)

        formData.append('recipients', emailForm.recipients)
        formData.append('subject', emailForm.subject)
        formData.append('content', emailForm.content)

        if (emailForm.cc) {
          formData.append('cc', emailForm.cc)
        }

        if (emailForm.bcc) {
          formData.append('bcc', emailForm.bcc)
        }

        // 添加附件
        emailForm.attachments.forEach(file => {
          formData.append('attachments', file.raw)
        })

        // 调用API发送邮件
        const response = await sendCustomEmailWithAttachments(formData)

        if (response.code === 200) {
          ElMessage.success(t('email.send.success'))
          // 清空表单
          resetEmailForm()
          // 刷新发送记录
          loadEmailRecords()
        } else {
          ElMessage.error(response.message || t('email.send.error'))
        }
      } else {
        // 使用系统邮箱发送
        formData.append('recipients', emailForm.recipients)
        formData.append('subject', emailForm.subject)
        formData.append('content', emailForm.content)

        // 添加附件
        emailForm.attachments.forEach(file => {
          formData.append('attachments', file.raw)
        })

        // 如果是定时发送
        if (emailForm.sendType === 'scheduled' && emailForm.scheduledDate) {
          formData.append('scheduledDate', emailForm.scheduledDate)
          formData.append('timezone', emailForm.timezone)

          const response = await scheduleSendEmail(formData)

          if (response.code === 200) {
            ElMessage.success(t('email.send.scheduled.success'))
            resetEmailForm()
            loadEmailRecords()
          } else {
            ElMessage.error(response.message || t('email.send.error'))
          }
        } else {
          // 立即发送
          const response = await sendEmailApi(formData)

          if (response.code === 200) {
            ElMessage.success(t('email.send.success'))
            resetEmailForm()
            loadEmailRecords()
          } else {
            ElMessage.error(response.message || t('email.send.error'))
          }
        }
      }
    } else {
      // 无附件邮件，使用JSON格式
      if (useCustomEmail) {
        // 使用自定义邮箱发送
        const emailData = {
          senderEmail: emailForm.sender,
          recipients: emailForm.recipients,
          subject: emailForm.subject,
          content: emailForm.content,
          cc: emailForm.cc || '',
          bcc: emailForm.bcc || ''
        }

        const response = await sendCustomEmail(emailData)

        if (response.code === 200) {
          ElMessage.success(t('email.send.success'))
          resetEmailForm()
          loadEmailRecords()
        } else {
          ElMessage.error(response.message || t('email.send.error'))
        }
      } else {
        // 使用系统邮箱发送
        const emailData = {
          recipients: emailForm.recipients,
          subject: emailForm.subject,
          content: emailForm.content
        }

        // 如果是定时发送
        if (emailForm.sendType === 'scheduled' && emailForm.scheduledDate) {
          emailData.scheduledDate = emailForm.scheduledDate
          emailData.timezone = emailForm.timezone

          const response = await scheduleSendEmailJson(emailData)

          if (response.code === 200) {
            ElMessage.success(t('email.send.scheduled.success'))
            resetEmailForm()
            loadEmailRecords()
          } else {
            ElMessage.error(response.message || t('email.send.error'))
          }
        } else {
          // 立即发送
          const response = await sendEmailJson(emailData)

          if (response.code === 200) {
            ElMessage.success(t('email.send.success'))
            resetEmailForm()
            loadEmailRecords()
          } else {
            ElMessage.error(response.message || t('email.send.error'))
          }
        }
      }
    }
  } catch (error) {
    ElMessage.error(t('email.send.error'))
  } finally {
    sendingEmail.value = false
  }
}

// 处理发送邮件响应
const handleSendResponse = (response) => {
  if (response.code === 200) {
    // 根据发送类型显示不同消息
    const isScheduled = emailForm.sendType === 'scheduled'
    if (isScheduled) {
      const scheduledDate = new Date(emailForm.scheduledDate).toLocaleString()
      ElMessage.success(`邮件已安排在 ${scheduledDate} 发送`)
    } else {
      ElMessage.success('邮件发送成功')
    }

    // 重置表单
    resetEmailForm()

    // 刷新邮件记录和配额
    loadEmailRecords()
    loadAllEmailRecords() // 重新加载所有邮件数据用于统计和图表
    loadEmailQuota()
  } else {
    ElMessage.error(response.message || '邮件发送失败')
  }
  sendingEmail.value = false
}

// 处理发送邮件错误
const handleSendError = (error) => {
  ElMessage.error('邮件发送失败，请稍后重试')
  sendingEmail.value = false
}

const validateEmailForm = () => {
  if (!emailForm.sender.trim()) {
    ElMessage.error('请选择发件人邮箱')
    return false
  }

  if (!emailForm.recipients.trim()) {
    ElMessage.error('请输入收件人邮箱')
    return false
  }

  if (!emailForm.subject.trim()) {
    ElMessage.error('请输入邮件主题')
    return false
  }

  if (!emailForm.content.trim()) {
    ElMessage.error('请输入邮件内容')
    return false
  }

  if (emailForm.sendType === 'scheduled' && !emailForm.scheduledDate) {
    ElMessage.error('请选择定时发送时间')
    return false
  }

  return true
}

// 加载邮件记录
const loadEmailRecords = () => {
  // 设置默认值，防止初始化阶段未定义
  const page = currentPage?.value || 1;
  const size = pageSize?.value || 10;

  // 确保loading状态可用
  if (loading) {
    loading.value = true;
  }

  // 设置请求超时
  const timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('请求超时')), 10000);
  });

  // 执行实际请求
  const fetchPromise = getEmailSendRecords({
    page: page,
    size: size
  });

  // 使用Promise.race竞争，谁先完成就用谁的结果
  Promise.race([fetchPromise, timeoutPromise])
      .then(response => {
        if (response.code === 200 && response.data) {
          emailRecords.value = response.data.records || []
          hasEmails.value = emailRecords.value.length > 0

          // 设置分页数据
          total.value = response.data.total || 0
        } else {
          emailRecords.value = []
          hasEmails.value = false
          total.value = 0
        }
        loading.value = false
      }).catch(error => {
    loading.value = false
    if (error.message === '请求超时') {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('获取邮件记录超时，请检查网络连接')
      } else {
        ElMessage.error('Get email records timeout, please check your network connection')
      }
    } else {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('获取邮件记录失败')
      } else {
        ElMessage.error('Get email records failed')
      }
    }
    // 出错时重置数据
    emailRecords.value = []
    hasEmails.value = false
    total.value = 0
  })
}

// 加载邮件配额
const loadEmailQuota = () => {
  getEmailQuota().then(response => {
    if (response.code === 200 && response.data) {
      emailQuota.value = response.data.emailSendRemaining || 0
      emailPackageLevel.value = response.data.emailPackageLevel || 0
      emailPackageExpireTime.value = response.data.emailPackageExpireTime
    } else {
      emailQuota.value = 0
      emailPackageLevel.value = 0
      emailPackageExpireTime.value = null
    }
  }).catch(error => {
    emailQuota.value = 0
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('获取邮件配额失败')
    } else {
      ElMessage.error('Get email quota failed')
    }
  })
}

// 删除邮件记录
const deleteEmailRecord = (record) => {
  ElMessageBox.confirm('确定要删除该邮件记录吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteEmailRecordApi(record.id).then(response => {
      if (response && response.code === 200) {
        ElMessage.success('删除成功')
        // 刷新邮件记录列表
        loadEmailRecords()
        // 重新加载所有邮件数据
        loadAllEmailRecords()
      } else {
        ElMessage.error(response?.message || '删除失败')
      }
    }).catch(error => {
      ElMessage.error('删除失败，请稍后重试')
    })
  }).catch(() => {
    // 取消删除，不做任何操作
  })
}

// 在script setup部分添加
const emailStats = ref({
  openRate: 0,
  deliveryRate: 0,
  tasks: 0,
  totalEmails: 0,
  sentEmails: 0
})

// 新增图表相关方法
const setChartPeriod = (period) => {
  chartPeriod.value = period
  updateChartData()
}

const updateChartData = (filteredRecords = null) => {
  // 使用传入的过滤记录或者全部记录
  const records = filteredRecords || allEmailRecords.value
  if (!records || records.length === 0) {
    resetChartData()
    return
  }

  // 根据选择的时间周期生成日期数据
  const dateData = generateDateRange(chartPeriod.value)

  // 生成每个日期的数据统计
  const successData = new Array(dateData.length).fill(0)
  const failData = new Array(dateData.length).fill(0)

  // 统计成功和失败的总数
  let totalSuccess = 0
  let totalFail = 0

  // 处理每条记录
  records.forEach(record => {
    const recordDate = new Date(record.sendTime)

    // 检查记录日期是否在选定的范围内
    const dateIndex = findDateIndex(recordDate, dateData, chartPeriod.value)
    if (dateIndex !== -1) {
      // 根据状态确定成功或失败
      // 状态：1-已发送(成功), 2-发送失败, 0-发送中(待处理)
      if (record.status === 1) {
        // 成功发送的邮件
        const recipientCount = record.recipients ? record.recipients.split(';').length : 1;
        successData[dateIndex] += record.deliveryCount || recipientCount;
        totalSuccess += record.deliveryCount || recipientCount;
      } else if (record.status === 2) {
        // 失败的邮件
        const recipientCount = record.recipients ? record.recipients.split(';').length : 1;
        failData[dateIndex] += recipientCount;
        totalFail += recipientCount;
      }
      // 状态为0的邮件(待发送)不计入统计
    }
  })

  // 更新饼图数据
  pieChartOption.value.series[0].data = [
    {value: totalSuccess, name: '成功', itemStyle: {color: '#19be6b'}},
    {value: totalFail, name: '失败', itemStyle: {color: '#ff4d51'}}
  ]

  // 更新折线图数据
  lineChartOption.value.xAxis.data = dateData.map(formatDate)
  lineChartOption.value.series[0].data = successData
  lineChartOption.value.series[1].data = failData
}

const resetChartData = () => {
  try {
    // 确保图表选项已初始化
    if (!pieChartOption || !lineChartOption) return;

    // 重置饼图数据
    pieChartOption.value.series[0].data = [
      {value: 0, name: '成功', itemStyle: {color: '#19be6b'}},
      {value: 0, name: '失败', itemStyle: {color: '#ff4d51'}}
    ]

    // 安全地生成默认日期范围
    const dateData = chartPeriod ? generateDateRange(chartPeriod.value) : [];

    // 重置折线图数据
    lineChartOption.value.xAxis.data = dateData.map(formatDate)
    lineChartOption.value.series[0].data = new Array(dateData.length).fill(0)
    lineChartOption.value.series[1].data = new Array(dateData.length).fill(0)
  } catch (err) {
  }
}

const generateDateRange = (period) => {
  const dates = []
  const today = new Date()
  today.setHours(0, 0, 0, 0)

  if (period === 'week') {
    // 生成近7天的日期
    for (let i = 6; i >= 0; i--) {
      const date = new Date(today)
      date.setDate(today.getDate() - i)
      dates.push(date)
    }
  } else if (period === 'month') {
    // 生成近30天的日期
    for (let i = 29; i >= 0; i--) {
      const date = new Date(today)
      date.setDate(today.getDate() - i)
      dates.push(date)
    }
  } else if (period === 'year') {
    // 生成近12个月的日期
    for (let i = 11; i >= 0; i--) {
      const date = new Date(today)
      date.setMonth(today.getMonth() - i)
      date.setDate(1)
      dates.push(date)
    }
  }

  return dates
}

const findDateIndex = (recordDate, dateRange, period) => {
  if (period === 'year') {
    // 按月份匹配
    for (let i = 0; i < dateRange.length; i++) {
      if (recordDate.getFullYear() === dateRange[i].getFullYear() &&
          recordDate.getMonth() === dateRange[i].getMonth()) {
        return i
      }
    }
  } else {
    // 按具体日期匹配
    for (let i = 0; i < dateRange.length; i++) {
      if (recordDate.getFullYear() === dateRange[i].getFullYear() &&
          recordDate.getMonth() === dateRange[i].getMonth() &&
          recordDate.getDate() === dateRange[i].getDate()) {
        return i
      }
    }
  }

  return -1
}

const formatDate = (date) => {
  if (chartPeriod.value === 'year') {
    // 年份显示为 "YYYY-MM"
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
  } else {
    // 其他周期显示为 "MM-DD"
    return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
  }
}

// 分页变量
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)

// 分页变化处理
const handleCurrentChange = (val) => {
  currentPage.value = val
  loadEmailRecords()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  loadEmailRecords()
}

// 邮件配额相关
const emailQuota = ref(0)
const emailPackageLevel = ref(0)
const emailPackageExpireTime = ref(null)

// 查看邮件记录详情
const viewRecordDetail = (record) => {
  currentRecord.value = record
  recordDetailVisible.value = true
}

// 更新统计数据
const updateEmailStats = (records) => {
  try {
    // 使用所有记录进行统计
    const allRecords = records || (allEmailRecords?.value || [])

    if (!allRecords || allRecords.length === 0) {
      if (hasData) hasData.value = false
      if (emailStats) {
        emailStats.value = {
          openRate: 0,
          deliveryRate: 0,
          tasks: 0,
          totalEmails: 0,
          sentEmails: 0
        }
      }
      return
    }

    if (hasData) hasData.value = true

    // 计算统计数据
    const totalEmails = allRecords.length
    const deliveredEmails = allRecords.filter(record => record.status === 1).length
    const failedEmails = allRecords.filter(record => record.status === 2).length
    const pendingEmails = allRecords.filter(record => record.status === 0).length

    // 只计算群发任务数量
    const totalTasks = allRecords.filter(record => record.isGroupSend === 1).length

    // 计算总接收人数和实际送达数
    let totalRecipients = 0
    let totalDelivered = 0

    allRecords.forEach(record => {
      const recipientCount = record.recipients ? record.recipients.split(';').length : 1
      totalRecipients += recipientCount

      if (record.status === 1) {
        totalDelivered += record.deliveryCount || recipientCount
      }
    })

    // 更新统计卡片数据
    if (emailStats) {
      emailStats.value = {
        openRate: totalDelivered > 0 ? ((allRecords.reduce((sum, record) => sum + (record.readCount || 0), 0) / totalDelivered) * 100).toFixed(2) : 0,
        deliveryRate: totalRecipients > 0 ? ((totalDelivered / totalRecipients) * 100).toFixed(2) : 0,
        tasks: totalTasks,
        totalEmails: totalRecipients, // 总邮件数改为总收件人数
        sentEmails: totalDelivered // 已发送改为已送达数
      }
    }
  } catch (err) {
    // 出现错误时设置默认值
    if (emailStats) {
      emailStats.value = {
        openRate: 0,
        deliveryRate: 0,
        tasks: 0,
        totalEmails: 0,
        sentEmails: 0
      }
    }
  }
}

// 添加设置日期范围的函数
const setDateRange = (range) => {
  dateRange.value = range

  // 根据选择的日期范围过滤数据
  const now = new Date()
  let filteredRecords = []

  if (range === 'all') {
    // 全部数据不做过滤
    filteredRecords = allEmailRecords.value
  } else if (range === 'month') {
    // 本月数据
    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
    filteredRecords = allEmailRecords.value.filter(record => {
      const recordDate = new Date(record.sendTime)
      return recordDate >= startOfMonth
    })
  } else if (range === 'week') {
    // 本周数据
    const startOfWeek = new Date(now)
    startOfWeek.setDate(now.getDate() - now.getDay()) // 周日为一周的开始
    startOfWeek.setHours(0, 0, 0, 0)
    filteredRecords = allEmailRecords.value.filter(record => {
      const recordDate = new Date(record.sendTime)
      return recordDate >= startOfWeek
    })
  } else if (range === 'day') {
    // 本日数据
    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    filteredRecords = allEmailRecords.value.filter(record => {
      const recordDate = new Date(record.sendTime)
      return recordDate >= startOfDay
    })
  } else if (range === 'year') {
    // 年度数据
    const startOfYear = new Date(now.getFullYear(), 0, 1)
    filteredRecords = allEmailRecords.value.filter(record => {
      const recordDate = new Date(record.sendTime)
      return recordDate >= startOfYear
    })
  }

  // 更新统计数据
  updateEmailStats(filteredRecords)

  // 更新图表数据（可选，如果你希望图表也随着日期范围变化）
  updateChartData(filteredRecords)
}

// 邮箱相关方法
const showAddEmailConfigDialog = () => {
  emailConfigForm.emailAddress = ''
  emailConfigForm.emailProvider = '' // 重置邮箱发行商
  // 重置Outlook OAuth字段
  emailConfigForm.clientId = ''
  emailConfigForm.tenantId = ''
  emailConfigForm.redirectUri = ''
  emailConfigForm.clientSecret = ''
  emailConfigDialogVisible.value = true
}

const addEmailConfig = async () => {
  // 验证邮箱格式
  if (!validateEmail(emailConfigForm.emailAddress)) {
    ElMessage.error(t('email.email.error.format'))
    return
  }

  // 验证是否选择了邮箱发行商
  if (!emailConfigForm.emailProvider) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请选择邮箱发行商')
    } else {
      ElMessage.error('Please select email provider')
    }
    return
  }

  // 如果是Outlook邮箱，验证OAuth信息
  // if (emailConfigForm.emailProvider === 'outlook') {
  //   if (!emailConfigForm.clientId || !emailConfigForm.tenantId) {
  //     ElMessage.error('请填写Outlook OAuth必要信息（Client ID和Tenant ID）')
  //     return
  //   }
  // }

  addingEmailConfig.value = true

  try {
    // 准备请求数据
    const requestData = {
      email: emailConfigForm.emailAddress,
      emailProvider: emailConfigForm.emailProvider
    }

    // 如果是Outlook邮箱，添加OAuth信息
    // if (emailConfigForm.emailProvider === 'outlook') {
    //   requestData.oauthInfo = JSON.stringify({
    //     clientId: emailConfigForm.clientId,
    //     tenantId: emailConfigForm.tenantId,
    //     redirectUri: emailConfigForm.redirectUri || '',
    //     clientSecret: emailConfigForm.clientSecret || ''
    //   })
    // }

    // 调用后端API添加邮箱配置
    const response = await addUserEmail(requestData)

    if (response.code !== 200) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error(response.msg || "添加邮箱配置失败")
      } else {
        ElMessage.error("Add email config failed")
      }
      return
    }

    // 创建新邮箱配置
    const newEmail = {
      id: response.data.id || Date.now().toString(),
      emailAddress: emailConfigForm.emailAddress,
      emailProvider: emailConfigForm.emailProvider, // 添加邮箱发行商信息
      status: EMAIL_STATUS.PENDING,  // 初始状态为待验证
      createdTime: new Date().toLocaleString()
    }

    // 添加到列表
    savedEmails.value.push(newEmail)

    // 关闭对话框
    emailConfigDialogVisible.value = false
    ElMessage.success(t('email.email.add.success'))

    // 如果是Outlook邮箱，打开OAuth认证弹窗
    if (emailConfigForm.emailProvider === 'outlook') {
      setTimeout(() => {
        showOutlookOAuthDialog(newEmail)
      }, 500)
    } else {
      // 其他邮箱类型，自动打开常规验证对话框
      setTimeout(() => {
        showVerifyEmailDialog(newEmail)
      }, 500)
    }
  } catch (error) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error(error.response?.data?.msg || '添加邮箱失败，请稍后重试')
    } else {
      ElMessage.error('Add email failed, please try again later')
    }
  } finally {
    addingEmailConfig.value = false
  }
}

const showVerifyEmailDialog = (email) => {
  currentVerifyingEmail.value = email
  emailVerificationForm.emailAddress = email.emailAddress
  emailVerificationForm.authCode = ''
  verifyEmailDialogVisible.value = true
}

// 显示Outlook OAuth认证对话框
const showOutlookOAuthDialog = (email) => {
  currentVerifyingEmail.value = email
  // 重置表单
  outlookOAuthForm.clientId = ''
  outlookOAuthForm.tenantId = ''
  outlookOAuthForm.redirectUri = ''
  outlookOAuthForm.clientSecret = ''
  // 显示对话框
  outlookOAuthDialogVisible.value = true
}


// 验证Outlook OAuth
const verifyOutlookOAuth = async () => {
  let loadingMessage = null
  // 验证必填字段
  if (!outlookOAuthForm.clientId || !outlookOAuthForm.tenantId) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请填写必要的OAuth认证信息')
    } else {
      ElMessage.error('Please fill in the required OAuth authentication information')
    }
    return
  }

  if (!outlookOAuthForm.clientSecret) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请填写Client Secret')
    } else {
      ElMessage.error('Please fill in the Client Secret')
    }
    return
  }

  verifyingEmail.value = true

  // 显示验证进行中的提示
  if (getCurrentLanguage() === 'zh') {
    loadingMessage = ElMessage({
      type: 'info',
      message: 'Outlook OAuth验证中，这可能需要1-2分钟，请耐心等待...',
      duration: 0 // 不自动关闭
    })
  } else {
    loadingMessage = ElMessage({
      type: 'info',
      message: 'Outlook OAuth verification in progress, this may take 1-2 minutes, please be patient...',
      duration: 0 // 不自动关闭
    })
  }

  try {

    // 先保存OAuth配置到数据库
    const saveResponse = await saveUserEmail(
        currentVerifyingEmail.value.email || currentVerifyingEmail.value.emailAddress,
        '', // 密码字段留空，后端会使用clientId等字段
        0, // 初始状态为未验证
        'outlook',
        { // 额外的OAuth信息
          clientId: outlookOAuthForm.clientId,
          tenantId: outlookOAuthForm.tenantId,
          redirectUri: outlookOAuthForm.redirectUri || '',
          clientSecret: outlookOAuthForm.clientSecret
        }
    )

    if (saveResponse.code !== 200) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error(saveResponse.message || '保存OAuth配置失败')
      } else {
        ElMessage.error('Save OAuth configuration failed')
      }
      if (loadingMessage) {
        loadingMessage.close()
      }
      verifyingEmail.value = false
      return
    }

    // 调用后端验证API，使用新的verifyOutlookToken方法
    const response = await verifyEmailCredentials({
      emailAddress: currentVerifyingEmail.value.email || currentVerifyingEmail.value.emailAddress,
      emailProvider: 'outlook',
      // 添加OAuth参数
      clientId: outlookOAuthForm.clientId,
      tenantId: outlookOAuthForm.tenantId,
      redirectUri: outlookOAuthForm.redirectUri || '',
      clientSecret: outlookOAuthForm.clientSecret
    })

    if (response.code === 200 && response.data) {
      // 验证成功，更新状态
      const emailIndex = savedEmails.value.findIndex(
          email => (email.email || email.emailAddress) === (currentVerifyingEmail.value.email || currentVerifyingEmail.value.emailAddress)
      )

      if (emailIndex !== -1) {
        savedEmails.value[emailIndex].status = EMAIL_STATUS.VERIFIED

        // 关闭对话框
        outlookOAuthDialogVisible.value = false
        if (getCurrentLanguage() === 'zh') {
          ElMessage.success('Outlook邮箱验证成功')
        } else {
          ElMessage.success('Outlook email verification succeeded')
        }

        // 如果是第一个验证成功的邮箱，设为默认
        if (savedEmails.value.filter(email => email.status === EMAIL_STATUS.VERIFIED).length === 1) {
          setDefaultEmail(savedEmails.value[emailIndex])
        }

        // 重新加载邮箱列表
        loadSavedEmails()
      }
    } else {
      // 验证失败，更新状态
      const emailIndex = savedEmails.value.findIndex(
          email => (email.email || email.emailAddress) === (currentVerifyingEmail.value.email || currentVerifyingEmail.value.emailAddress)
      )

      if (emailIndex !== -1) {
        savedEmails.value[emailIndex].status = EMAIL_STATUS.FAILED
      }
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error(response.message || 'Outlook OAuth验证失败')
      } else {
        ElMessage.error('Outlook OAuth verification failed')
      }
    }
  } catch (error) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error(error.message || 'Outlook OAuth验证失败')
    } else {
      ElMessage.error('Outlook OAuth verification failed')
    }

    // 更新状态为验证失败
    const emailIndex = savedEmails.value.findIndex(
        email => (email.email || email.emailAddress) === (currentVerifyingEmail.value.email || currentVerifyingEmail.value.emailAddress)
    )

    if (emailIndex !== -1) {
      savedEmails.value[emailIndex].status = EMAIL_STATUS.FAILED
    }
  } finally {
    // 关闭加载提示
    if (loadingMessage) {
      loadingMessage.close()
    }
    verifyingEmail.value = false
  }
}

const verifyEmail = async () => {
  let loadingMessage = null
  if (!emailVerificationForm.authCode) {
    ElMessage.error(t('email.email.error.empty.auth'))
    return
  }

  verifyingEmail.value = true

  // 显示验证进行中的提示
  if (getCurrentLanguage() === 'zh') {
    loadingMessage = ElMessage({
      type: 'info',
      message: '邮箱验证中，这可能需要1-2分钟，请耐心等待...',
      duration: 0 // 不自动关闭
    })
  } else {
    loadingMessage = ElMessage({
      type: 'info',
      message: 'Email verification in progress, this may take 1-2 minutes, please be patient...',
      duration: 0 // 不自动关闭
    })
  }

  try {
    // 调用后端验证API
    // 查找当前验证的邮箱配置
    const emailToVerify = savedEmails.value.find(email => email.emailAddress === emailVerificationForm.emailAddress)

    // 调用后端验证API，传递邮箱发行商信息
    const response = await verifyEmailCredentials({
      emailAddress: emailVerificationForm.emailAddress,
      authCode: emailVerificationForm.authCode,
      emailProvider: emailToVerify ? emailToVerify.emailProvider : '' // 传递邮箱发行商信息
    })

    if (response.code === 200 && response.data) {
      // 验证成功，更新状态
      const emailIndex = savedEmails.value.findIndex(
          email => email.emailAddress === emailVerificationForm.emailAddress
      )

      if (emailIndex !== -1) {
        savedEmails.value[emailIndex].status = EMAIL_STATUS.VERIFIED

        // 保存到后端
        await saveUserEmail(emailVerificationForm.emailAddress, emailVerificationForm.authCode, 1, emailToVerify ? emailToVerify.emailProvider : '')

        // 关闭对话框
        verifyEmailDialogVisible.value = false
        ElMessage.success(t('email.email.verify.success'))

        // 如果是第一个验证成功的邮箱，设为默认
        if (savedEmails.value.filter(email => email.status === EMAIL_STATUS.VERIFIED).length === 1) {
          setDefaultEmail(savedEmails.value[emailIndex])
        }
      }
    } else {
      // 验证失败，更新状态
      const emailIndex = savedEmails.value.findIndex(
          email => email.emailAddress === emailVerificationForm.emailAddress
      )

      if (emailIndex !== -1) {
        savedEmails.value[emailIndex].status = EMAIL_STATUS.FAILED

        // 保存到后端（标记为验证失败）
        await saveUserEmail(emailVerificationForm.emailAddress, emailVerificationForm.authCode, 0, emailToVerify ? emailToVerify.emailProvider : '')
        ElMessage.error(t('email.email.verify.failed'))
      }
    }
  } catch (error) {
    ElMessage.error(t('email.email.verify.error'))

    // 更新状态为验证失败
    const emailIndex = savedEmails.value.findIndex(
        email => email.emailAddress === emailVerificationForm.emailAddress
    )

    if (emailIndex !== -1) {
      savedEmails.value[emailIndex].status = EMAIL_STATUS.FAILED
    }
  } finally {
    // 关闭加载提示
    if (loadingMessage) {
      loadingMessage.close()
    }
    verifyingEmail.value = false
  }
}

const saveEmailsToStorage = () => {
  localStorage.setItem('userEmails', JSON.stringify(savedEmails.value))
}

const loadSavedEmails = async (forceRefresh = false) => {
  try {

    // 强制从后端获取最新数据，不使用缓存
    const allEmailsResponse = await getAllUserEmails()
    if (allEmailsResponse.code === 200 && allEmailsResponse.data) {
      // 转换后端数据格式
      savedEmails.value = allEmailsResponse.data.map(email => ({
        id: email.id.toString(),
        emailAddress: email.email,
        password: email.emailPassword,
        status: email.emailState,
        emailProvider: email.emailProvider || detectEmailProvider(email.email),
        createdTime: new Date(email.createdTime).toLocaleString()
      }))

    } else {
      savedEmails.value = []
    }

    // 获取已验证的邮箱列表，用于发件人选择
    const verifiedResponse = await getVerifiedEmails()
    if (verifiedResponse.code === 200 && verifiedResponse.data) {
      // 设置已验证的邮箱列表
      verifiedEmails.value = verifiedResponse.data.map(email => ({
        id: email.id.toString(),
        emailAddress: email.email,
        password: email.emailPassword
      }))

      // 如果有已验证的邮箱，设置第一个为默认发件人
      if (verifiedEmails.value.length > 0) {
        emailForm.sender = verifiedEmails.value[0].emailAddress
      }

    } else {
      verifiedEmails.value = []
    }

  } catch (error) {
    // 出错时不再依赖localStorage，直接设置为空
    savedEmails.value = []
    verifiedEmails.value = []
    emailForm.sender = ''

    // 如果是网络错误或认证错误，提示用户
    if (error.response && error.response.status === 401) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.warning('登录状态已过期，请重新登录')
      } else {
        ElMessage.warning('Session expired, please log in again')
      }
    } else {

    }
  }
}

const setDefaultEmail = (email) => {
  // 只有已验证的邮箱可以设为默认
  if (email.status === EMAIL_STATUS.VERIFIED) {
    emailForm.sender = email.emailAddress
    ElMessage.success(t('email.email.set.default.success'))
  }
}

// 验证邮箱格式的辅助函数
const validateEmail = (email) => {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return emailRegex.test(email)
}

// 根据邮箱地址检测邮箱发行商
const detectEmailProvider = (email) => {
  if (!email) return 'other';

  const emailLower = email.toLowerCase();

  if (emailLower.endsWith('@qq.com')) return 'qq';
  if (emailLower.endsWith('@163.com')) return '163';
  if (emailLower.endsWith('@126.com')) return '126';
  if (emailLower.endsWith('@sina.com') || emailLower.endsWith('@sina.cn')) return 'sina';
  if (emailLower.endsWith('@gmail.com')) return 'gmail';
  if (emailLower.endsWith('@outlook.com') || emailLower.endsWith('@hotmail.com')) return 'outlook';
  if (emailLower.endsWith('@yahoo.com')) return 'yahoo';

  return 'other';
}

// 将邮箱发行商代码转换为显示名称
const getEmailProviderName = (provider) => {
  const providerMap = {
    'qq': 'QQ邮箱',
    '163': '163邮箱',
    '126': '126邮箱',
    'sina': '新浪邮箱',
    'gmail': '谷歌邮箱',
    'outlook': 'Outlook邮箱',
    'yahoo': 'Yahoo邮箱',
    'other': '其他'
  }
  return providerMap[provider] || '未知'
}

const deleteEmailConfig = (email) => {
  ElMessageBox.confirm(
      t('email.email.delete.confirm'),
      t('email.email.delete.title'),
      {
        confirmButtonText: t('email.email.delete.yes'),
        cancelButtonText: t('email.email.delete.no'),
        type: 'warning'
      }
  ).then(() => {
    // 显示加载提示
    const loading = ElMessage({
      type: 'info',
      message: t('email.email.deleting'),
      duration: 0 // 不自动关闭
    })

    // 调用后端API删除邮箱配置
    deleteUserEmail(email.emailAddress).then(response => {
      loading.close() // 关闭加载提示

      if (response && response.code === 200) {
        // 从前端列表中移除
        savedEmails.value = savedEmails.value.filter(item => item.id !== email.id)
        saveEmailsToStorage()
        ElMessage.success(t('email.email.delete.success'))

        // 刷新已验证邮箱列表
        loadSavedEmails()
      } else {
        ElMessage.error(response?.message || t('email.email.delete.error'))
      }
    }).catch(error => {
      loading.close()
      ElMessage.error(t('email.email.delete.error'))
    })
  }).catch(() => {
    // 用户取消，不做任何操作
  })
}

// 显示修改邮箱配置对话框
const showEditEmailDialog = (email) => {
  // 初始化表单数据
  editEmailForm.id = email.id
  editEmailForm.emailAddress = email.emailAddress
  editEmailForm.emailProvider = email.emailProvider
  editEmailForm.status = email.status
  editEmailForm.emailPassword = '' // 清空密码，需要用户重新输入

  // 如果是Outlook邮箱，还需要获取OAuth配置信息
  if (email.emailProvider === 'outlook') {
    // 这里可能需要从后端获取完整的OAuth信息
    // 或者直接使用现有对象中的数据
    editEmailForm.clientId = email.clientId || ''
    editEmailForm.tenantId = email.tenantId || ''
    editEmailForm.redirectUri = email.redirectUri || ''
    editEmailForm.clientSecret = '' // 清空密码，需要用户重新输入
  }

  // 显示对话框
  editEmailDialogVisible.value = true
}

// 提交修改邮箱配置
const updateEmailConfig = async () => {
  // 表单验证
  if (!editEmailForm.emailAddress) {
    ElMessage.error(t('email.email.address.required'))
    return
  }

  // 邮箱格式验证
  if (!validateEmail(editEmailForm.emailAddress)) {
    ElMessage.error(t('email.email.error.format'))
    return
  }

  // 根据邮箱类型验证其他字段
  if (editEmailForm.emailProvider === 'outlook') {
    if (!editEmailForm.clientId || !editEmailForm.tenantId || !editEmailForm.clientSecret) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('请填写所有必填的OAuth信息')
      } else {
        ElMessage.error('Please fill in all required OAuth information')
      }
      return
    }
  } else {
    if (!editEmailForm.emailPassword) {
      ElMessage.error(t('email.email.auth.required'))
      return
    }
  }

  updatingEmail.value = true

  try {
    // 构建请求数据
    const updateData = {
      id: editEmailForm.id,
      email: editEmailForm.emailAddress,
      emailProvider: editEmailForm.emailProvider
    }

    // 根据邮箱类型添加不同的字段
    if (editEmailForm.emailProvider === 'outlook') {
      updateData.clientId = editEmailForm.clientId
      updateData.tenantId = editEmailForm.tenantId
      updateData.redirectUri = editEmailForm.redirectUri
      updateData.clientSecret = editEmailForm.clientSecret
    } else {
      updateData.emailPassword = editEmailForm.emailPassword
    }

    // 调用API
    const response = await updateUserEmail(updateData)

    if (response.code === 200) {
      ElMessage.success(t('email.email.verify.success'))
      editEmailDialogVisible.value = false

      // 刷新列表
      loadSavedEmails()
    } else {
      ElMessage.error(response.message || t('email.email.verify.error'))
    }
  } catch (error) {
    ElMessage.error(error.message || t('email.email.verify.error'))
  } finally {
    updatingEmail.value = false
  }
}

// 导入收件人相关数据
const importRecipientsVisible = ref(false)
const importingRecipients = ref(false)
const importPreview = ref([])
const importedEmails = ref([])
const importFile = ref(null)
const fileReader = ref(null)

// 显示导入收件人对话框
const showImportRecipientsDialog = () => {
  importRecipientsVisible.value = true
  importPreview.value = []
  importedEmails.value = []
  importFile.value = null
}

// 处理导入文件变化
const handleImportFileChange = (file) => {
  importFile.value = file.raw

  // 检查文件类型
  const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls')
  if (!isExcel) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('请上传Excel格式的文件')
    } else {
      ElMessage.error('Please upload an Excel file')
    }
    return false
  }

  // 读取Excel文件
  fileReader.value = new FileReader()
  fileReader.value.onload = (e) => {
    try {
      const data = new Uint8Array(e.target.result)
      const workbook = XLSX.read(data, {type: 'array'})

      // 获取第一个工作表
      const firstSheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[firstSheetName]

      // 转换为JSON
      const jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1})

      // 提取邮箱
      const emails = []
      jsonData.forEach(row => {
        // 处理每一行，提取有效的邮箱地址
        if (Array.isArray(row)) {
          row.forEach(cell => {
            if (cell && typeof cell === 'string') {
              // 基本的邮箱格式验证
              if (isValidEmail(cell)) {
                emails.push(cell.trim())
              }
            }
          })
        } else if (row && typeof row === 'string') {
          if (isValidEmail(row)) {
            emails.push(row.trim())
          }
        }
      })

      // 去重
      const uniqueEmails = [...new Set(emails)]
      importedEmails.value = uniqueEmails
      importPreview.value = uniqueEmails

      if (uniqueEmails.length === 0) {
        if (getCurrentLanguage() === 'zh') {
          ElMessage.warning('未发现有效的邮箱地址')
        } else {
          ElMessage.warning('No valid email address found')
        }
      }
    } catch (error) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('解析Excel文件失败')
      } else {
        ElMessage.error('Failed to parse Excel file')
      }
    }
  }

  fileReader.value.readAsArrayBuffer(file.raw)
  return false // 阻止自动上传
}

// 确认导入收件人
const confirmImportRecipients = () => {
  importingRecipients.value = true
  try {
    if (importedEmails.value.length > 0) {
      // 如果已有收件人，则追加新导入的邮箱
      let currentRecipients = emailForm.recipients ? emailForm.recipients.split(';').filter(r => r.trim() !== '') : []

      // 合并并去重
      const allRecipients = [...new Set([...currentRecipients, ...importedEmails.value])]

      // 更新收件人字段
      emailForm.recipients = allRecipients.join(';')

      if (getCurrentLanguage() === 'zh') {
        ElMessage.success(`成功导入 ${importedEmails.value.length} 个收件人`)
      } else {
        ElMessage.success(`Successfully imported ${importedEmails.value.length} recipients`)
      }
    }

    importRecipientsVisible.value = false
  } catch (error) {
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('导入收件人时出错')
    } else {
      ElMessage.error('Failed to import recipients')
    }
  } finally {
    importingRecipients.value = false
  }
}

// 验证邮箱格式
const isValidEmail = (email) => {
  if (!email || typeof email !== 'string') return false
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return emailRegex.test(email.trim())
}

// 在组件销毁前清理资源
onBeforeUnmount(() => {
  // 清理FileReader资源
  if (fileReader.value) {
    fileReader.value.onload = null
    fileReader.value = null
  }

  // 清理其他引用和计时器
  if (filterDebounceTimer && filterDebounceTimer.value) {
    clearTimeout(filterDebounceTimer.value)
  }
})

// Tab 相关数据 - 临时注释掉域名配置和模板功能

// 添加计算属性 - 解析收件人
const parsedRecipients = computed(() => {
  if (!currentRecord.value) return [];

  // 如果recipients是字符串，按分号拆分为数组
  if (currentRecord.value.recipients && typeof currentRecord.value.recipients === 'string') {
    return currentRecord.value.recipients.split(';').filter(r => r.trim() !== '');
  }

  // 如果已经是数组，直接返回
  if (Array.isArray(currentRecord.value.recipients)) {
    return currentRecord.value.recipients;
  }

  return [];
});

// 收件人数量
const recipientsCount = computed(() => {
  return parsedRecipients.value.length;
});

// 送达比例
const deliveryPercentage = computed(() => {
  if (!currentRecord.value || recipientsCount.value === 0) return 0;
  return Math.round((currentRecord.value.deliveryCount || 0) / recipientsCount.value * 100);
});

// 送达状态
const deliveryStatus = computed(() => {
  if (!currentRecord.value) return 'warning';
  if (currentRecord.value.deliveryCount === recipientsCount.value) return 'success';
  if (currentRecord.value.deliveryCount === 0) return 'exception';
  return 'warning';
});

// 解析附件
const parsedAttachments = computed(() => {
  if (!currentRecord.value || !currentRecord.value.attachments) return [];

  // 如果attachments是字符串，按分号拆分为数组
  if (typeof currentRecord.value.attachments === 'string') {
    return currentRecord.value.attachments.split(';')
        .filter(a => a.trim() !== '')
        .map(a => ({name: a.trim()}));
  }

  // 如果已经是数组，确保每个项都是对象
  if (Array.isArray(currentRecord.value.attachments)) {
    return currentRecord.value.attachments.map(a => {
      if (typeof a === 'string') return {name: a};
      return a;
    });
  }

  return [];
});

// 文件相关的辅助方法
const getFileType = (attachment) => {
  const name = typeof attachment === 'string' ? attachment : attachment.name;
  if (!name) return 'other';

  const extension = name.split('.').pop().toLowerCase();

  if (['pdf'].includes(extension)) return 'pdf';
  if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(extension)) return 'image';
  if (['xls', 'xlsx', 'csv'].includes(extension)) return 'excel';
  if (['doc', 'docx', 'rtf'].includes(extension)) return 'word';
  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) return 'zip';

  return 'other';
};

const getFileName = (attachment) => {
  return typeof attachment === 'string' ? attachment : attachment.name;
};

const formatFileSize = (size) => {
  if (!size) return '';

  const units = ['B', 'KB', 'MB', 'GB'];
  let index = 0;
  let fileSize = size;

  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024;
    index++;
  }

  return `${fileSize.toFixed(1)} ${units[index]}`;
};

// 在附件项的按钮部分添加点击事件
const previewAttachment = async (attachment, index) => {
  let loadingMessage = null; // 将loadingMessage定义在函数作用域

  try {
    // 获取附件路径
    let attachmentPath = '';
    if (typeof attachment === 'string') {
      attachmentPath = attachment;
    } else if (attachment && attachment.name) {
      attachmentPath = attachment.name;
    }

    if (!attachmentPath) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('无效的附件路径');
      } else {
        ElMessage.error('Invalid attachment path');
      }
      return;
    }

    // 先检查文件是否存在
    const fileExists = await checkFileExists(attachmentPath);
    if (!fileExists) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('附件不存在或已删除');
      } else {
        ElMessage.error('Attachment does not exist or has been deleted');
      }
      return;
    }

    // 获取文件类型
    const fileType = getFileType(attachment);

    // 根据文件类型选择不同的预览方式
    if (fileType === 'image' || fileType === 'pdf') {
      // 显示加载中提示
      if (getCurrentLanguage() === 'zh') {
        loadingMessage = ElMessage({
          type: 'info',
          message: '正在打开文件，请稍候...',
          duration: 0 // 不自动关闭
        })
      } else {
        loadingMessage = ElMessage({
          type: 'info',
          message: 'Opening file, please wait...',
          duration: 0 // 不自动关闭
        })
      }

      // 直接构造预览URL并打开
      const baseUrl = window.location.origin;
      const token = Date.now().toString(); // 简单的token生成
      const previewUrl = `${baseUrl}/api/email/preview-attachment?path=${encodeURIComponent(attachmentPath)}&token=${token}`;

      // 打开新窗口预览
      window.open(previewUrl, '_blank');
      if (loadingMessage) {
        loadingMessage.close();
      }
    } else {
      // 其他文件类型，提示下载后查看
      if (getCurrentLanguage() === 'zh') {
        ElMessage.warning('该类型文件不支持在线预览，请下载后查看');
      } else {
        ElMessage.warning('This type of file does not support online preview, please download it and view it');
      }
    }
  } catch (error) {
    console.error('预览附件出错:', error);
    if (loadingMessage) {
      loadingMessage.close();
    }
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('无法打开附件，文件可能不存在或已删除');
    } else {
      ElMessage.error('Failed to open attachment, file may not exist or has been deleted');
    }
  }
};

// 检查文件是否存在的函数
async function checkFileExists(filePath) {
  try {
    const response = await fetch(`/api/email/check-attachment-exists?path=${encodeURIComponent(filePath)}`, {
      method: 'Get'
    });
    console.log('checkFileExists response:', response);
    return response.ok;
  } catch (error) {
    console.error('检查文件存在性出错:', error);
    return false;
  }
}

const downloadAttachmentFile = async (attachment, index) => {
  let loadingMessage = null; // 将loadingMessage定义在函数作用域

  try {
    // 获取附件路径
    let attachmentPath = '';
    let fileName = '';

    if (typeof attachment === 'string') {
      attachmentPath = attachment;
      // 从路径中提取文件名
      const parts = attachment.split(/[\/\\]/);
      fileName = parts[parts.length - 1];
    } else if (attachment && attachment.name) {
      attachmentPath = attachment.name;
      fileName = getFileName(attachment);
    } else {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('无效的附件信息');
      } else {
        ElMessage.error('Invalid attachment information');
      }
      return;
    }

    if (!attachmentPath) {
      if (getCurrentLanguage() === 'zh') {
        ElMessage.error('无效的附件路径');
      } else {
        ElMessage.error('Invalid attachment path');
      }
      return;
    }

    // 显示下载中提示
    if (getCurrentLanguage() === 'zh') {
      loadingMessage = ElMessage({
        type: 'info',
        message: '附件下载中，请稍候...',
        duration: 0 // 不自动关闭
      });
    } else {
      loadingMessage = ElMessage({
        type: 'info',
        message: 'Attachment downloading, please wait...',
        duration: 0 // 不自动关闭
      });
    }

    try {
      // 使用fetch API直接下载文件
      const baseUrl = window.location.origin;
      const downloadUrl = `${baseUrl}/api/email/download-attachment?path=${encodeURIComponent(attachmentPath)}`;

      // 使用fetch获取文件数据
      const response = await fetch(downloadUrl);
      if (!response.ok) {
        if (getCurrentLanguage() === 'zh') {
          throw new Error(`下载失败，状态码: ${response.status}`);
        } else {
          throw new Error(`Download failed`);
        }
      }

      // 获取文件Blob
      const blob = await response.blob();

      // 创建下载链接
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName; // 设置下载文件名

      // 添加到页面并触发点击
      document.body.appendChild(link);
      link.click();

      // 清理
      setTimeout(() => {
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
        if (loadingMessage) {
          loadingMessage.close();
        }
        if (getCurrentLanguage() === 'zh') {
          ElMessage.success('附件下载成功');
        } else {
          ElMessage.success('Attachment downloaded successfully');
        }
      }, 100);
    } catch (error) {
      // 关闭下载提示
      if (loadingMessage) {
        loadingMessage.close();
      }
      throw error;
    }
  } catch (error) {
    if (loadingMessage) {
      loadingMessage.close();
    }
    if (getCurrentLanguage() === 'zh') {
      ElMessage.error('下载附件失败，请稍后重试');
    } else {
      ElMessage.error('Failed to download attachment, please try again later');
    }
  }
};


</script>

<style scoped>
.email-container {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  width: 100%;
}

.main-container {
  display: flex;
  flex: 1;
  height: 100%;
  min-height: calc(100vh - 60px);
  position: relative;
  width: 100%;
}

.content {
  flex: 1;
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f5f7fa;
}

/* 水平选项卡菜单样式 */
.horizontal-menu {
  display: flex;
  background-color: #fff;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.menu-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  position: relative;
}

.menu-item.active {
  color: #409EFF;
  font-weight: 500;
  border-bottom: 2px solid #409EFF;
}

/* 内容区样式 */
.section-container {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #409EFF;
  border-radius: 2px;
}

.date-selector {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.date-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.date-btn {
  padding: 6px 12px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  color: #606266;
  transition: all 0.3s;
  margin-right: 6px;
}

.date-btn:hover {
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.date-btn.active {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

.stats-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 10px;
}

.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 12px;
}

.task-icon {
  background-color: #ffa500;
  color: white;
}

.total-icon {
  background-color: #1890ff;
  color: white;
}

.success-icon {
  background-color: #19be6b;
  color: white;
}

.fail-icon {
  background-color: #ff4d51;
  color: white;
}

.ratio-icon {
  background-color: #17c2d7;
  color: white;
}

.sixth-icon {
  background-color: #722ed1;
  color: white;
}

.card-content {
  display: flex;
  flex-direction: column;
}

.card-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.card-label {
  font-size: 14px;
  color: #606266;
  margin-top: 4px;
}

.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  text-align: center;
}

.empty-data img {
  width: 80px;
  height: 80px;
  opacity: 0.6;
}

.empty-data p {
  color: #909399;
  margin-top: 8px;
}

/* 邮件列表 */
.email-list-tabs {
  margin-bottom: 20px;
}

.tab-btn {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.tab-btn.active {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

/* 发邮件页面样式 */
.tab-content {
  display: flex;
  flex-direction: column;
}

.email-form {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
}

.form-tip {
  margin-top: 5px;
  font-size: 12px;
}

.recipient-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.template-btn {
  margin-left: 10px;
}

.add-subject-btn {
  margin-left: 10px;
}

.send-options {
  display: flex;
  gap: 20px;
}

.editor-content {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 300px;
  padding: 10px;
}

.attachments {
  margin-top: 20px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.right-actions {
  display: flex;
  gap: 10px;
}

/* 邮件模板页面样式 */
.templates-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.templates-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  width: 100%;
}

/* 域名配置页面样式 */
.domains-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  width: 100%;
}

.add-domain-btn {
  margin-bottom: 20px;
}

/* 域名验证对话框样式 */
.verify-info {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.verify-info p {
  margin-bottom: 15px;
  font-weight: 500;
}

.verify-record {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
}

.record-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.record-item:last-child {
  margin-bottom: 0;
}

.record-label {
  width: 100px;
  color: #606266;
  font-weight: 500;
}

.record-value {
  flex: 1;
  color: #303133;
  background-color: #f5f7fa;
  padding: 5px 10px;
  border-radius: 3px;
  margin-right: 10px;
  font-family: monospace;
}

/* 模板相关样式 */
.template-editor {
  margin-bottom: 10px;
}

.variables-tips {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
}

.variables-tips p {
  margin-bottom: 8px;
  font-weight: 500;
}

.variables-tips ul {
  margin: 0;
  padding-left: 20px;
}

.variables-tips li {
  margin-bottom: 5px;
}

.variables-tips code {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
  color: #409EFF;
  font-family: monospace;
}

.schedule-options {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.template-actions {
  margin-top: 8px;
}

.content-type-selector {
  margin-bottom: 15px;
}

.template-selector {
  margin-bottom: 15px;
}

.editor-content.readonly {
  background-color: #f9f9f9;
  cursor: not-allowed;
}

/* 邮件详情对话框样式 */
.email-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #606266;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  color: #303133;
}

.content-box {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  margin-top: 5px;
}

.chart-container {
  margin-top: 20px;
}

.chart-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-box {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 400px;
}

.chart-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 15px;
  font-weight: 500;
}

.chart-wrapper {
  height: 350px;
  width: 100%;
}

.pie-chart {
  height: 100%;
  width: 100%;
}

.line-chart {
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .chart-row {
    flex-direction: column;
  }
}

.email-list .el-table {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.email-detail-dialog .el-dialog__body {
  padding: 10px;
}

.email-detail .el-card.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.email-detail .detail-subject {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.email-detail .detail-status {
  display: flex;
  align-items: center;
}

.email-detail .detail-status .el-tag {
  margin-right: 10px;
}

.email-detail .detail-time {
  font-size: 12px;
  color: #909399;
}

.email-detail .detail-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-detail .detail-row {
  display: flex;
  align-items: center;
}

.email-detail .detail-label {
  width: 100px;
  font-weight: 500;
  color: #606266;
  flex-shrink: 0;
}

.email-detail .detail-value {
  flex: 1;
  color: #303133;
}

.email-detail .sender-info {
  display: flex;
  align-items: center;
}

.email-detail .sender-info .el-avatar {
  margin-right: 10px;
}

.email-detail .empty-info {
  color: #909399;
  font-style: italic;
}

.email-detail .content-section {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.email-detail .content-header {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}

.email-detail .content-body {
  flex: 1;
  color: #606266;
}

.email-detail .html-content {
  white-space: pre-wrap;
}

.email-detail .attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.email-detail .attachment-item {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.email-detail .attachment-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.email-detail .attachment-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: #e6f7ff;
  margin-right: 12px;
  color: #1890ff;
}

.email-detail .attachment-icon .el-icon {
  font-size: 20px;
}

.email-detail .attachment-info {
  flex: 1;
  overflow: hidden;
}

.email-detail .attachment-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-detail .attachment-size {
  color: #909399;
  font-size: 12px;
  margin-top: 2px;
}

.email-detail .attachment-actions {
  display: flex;
  gap: 5px;
}

.recipients-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 100px;
  overflow-y: auto;
  padding: 5px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.delivery-info {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.delivery-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.deliver-icon {
  color: #67C23A;
}

.total-icon {
  color: #409EFF;
}

.delivery-divider {
  margin: 0 10px;
  color: #dcdfe6;
  font-size: 18px;
}

.email-detail .delivery-info {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.email-detail .recipient-tag {
  margin-right: 5px;
}

.email-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.email-config-list {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  width: 100%;
}

.verifying-email {
  margin-bottom: 20px;
}

.email-config-list .el-table {
  margin-bottom: 20px;
}

.email-config-list .el-table .el-table-column {
  padding: 10px 0;
}

.email-config-list .el-table .el-table-column:nth-child(2) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(3) {
  text-align: right;
}

.email-config-list .el-table .el-table-column:nth-child(4) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(5) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(6) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(7) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(8) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(9) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(10) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(11) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(12) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(13) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(14) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(15) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(16) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(17) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(18) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(19) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(20) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(21) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(22) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(23) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(24) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(25) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(26) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(27) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(28) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(29) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(30) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(31) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(32) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(33) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(34) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(35) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(36) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(37) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(38) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(39) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(40) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(41) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(42) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(43) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(44) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(45) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(46) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(47) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(48) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(49) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(50) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(51) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(52) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(53) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(54) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(55) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(56) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(57) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(58) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(59) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(60) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(61) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(62) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(63) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(64) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(65) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(66) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(67) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(68) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(69) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(70) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(71) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(72) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(73) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(74) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(75) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(76) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(77) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(78) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(79) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(80) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(81) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(82) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(83) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(84) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(85) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(86) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(87) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(88) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(89) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(90) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(91) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(92) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(93) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(94) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(95) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(96) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(97) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(98) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(99) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(100) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(101) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(102) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(103) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(104) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(105) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(106) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(107) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(108) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(109) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(110) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(111) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(112) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(113) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(114) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(115) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(116) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(117) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(118) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(119) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(120) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(121) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(122) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(123) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(124) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(125) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(126) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(127) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(128) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(129) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(130) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(131) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(132) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(133) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(134) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(135) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(136) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(137) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(138) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(139) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(140) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(141) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(142) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(143) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(144) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(145) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(146) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(147) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(148) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(149) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(150) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(151) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(152) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(153) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(154) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(155) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(156) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(157) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(158) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(159) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(160) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(161) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(162) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(163) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(164) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(165) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(166) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(167) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(168) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(169) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(170) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(171) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(172) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(173) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(174) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(175) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(176) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(177) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(178) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(179) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(180) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(181) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(182) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(183) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(184) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(185) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(186) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(187) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(188) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(189) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(190) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(191) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(192) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(193) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(194) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(195) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(196) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(197) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(198) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(199) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(200) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(201) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(202) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(203) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(204) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(205) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(206) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(207) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(208) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(209) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(210) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(211) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(212) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(213) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(214) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(215) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(216) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(217) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(218) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(219) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(220) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(221) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(222) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(223) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(224) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(225) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(226) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(227) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(228) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(229) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(230) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(231) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(232) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(233) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(234) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(235) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(236) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(237) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(238) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(239) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(240) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(241) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(242) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(243) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(244) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(245) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(246) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(247) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(248) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(249) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(250) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(251) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(252) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(253) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(254) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(255) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(256) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(257) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(258) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(259) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(260) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(261) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(262) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(263) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(264) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(265) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(266) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(267) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(268) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(269) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(270) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(271) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(272) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(273) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(274) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(275) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(276) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(277) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(278) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(279) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(280) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(281) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(282) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(283) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(284) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(285) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(286) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(287) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(288) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(289) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(290) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(291) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(292) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(293) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(294) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(295) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(296) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(297) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(298) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(299) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(300) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(301) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(302) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(303) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(304) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(305) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(306) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(307) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(308) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(309) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(310) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(311) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(312) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(313) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(314) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(315) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(316) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(317) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(318) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(319) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(320) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(321) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(322) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(323) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(324) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(325) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(326) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(327) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(328) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(329) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(330) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(331) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(332) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(333) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(334) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(335) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(336) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(337) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(338) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(339) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(340) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(341) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(342) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(343) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(344) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(345) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(346) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(347) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(348) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(349) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(350) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(351) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(352) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(353) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(354) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(355) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(356) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(357) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(358) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(359) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(360) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(361) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(362) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(363) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(364) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(365) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(366) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(367) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(368) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(369) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(370) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(371) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(372) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(373) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(374) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(375) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(376) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(377) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(378) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(379) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(380) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(381) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(382) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(383) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(384) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(385) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(386) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(387) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(388) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(389) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(390) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(391) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(392) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(393) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(394) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(395) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(396) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(397) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(398) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(399) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(400) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(401) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(402) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(403) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(404) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(405) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(406) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(407) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(408) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(409) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(410) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(411) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(412) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(413) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(414) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(415) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(416) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(417) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(418) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(419) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(420) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(421) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(422) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(423) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(424) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(425) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(426) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(427) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(428) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(429) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(430) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(431) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(432) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(433) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(434) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(435) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(436) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(437) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(438) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(439) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(440) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(441) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(442) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(443) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(444) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(445) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(446) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(447) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(448) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(449) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(450) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(451) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(452) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(453) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(454) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(455) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(456) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(457) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(458) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(459) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(460) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(461) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(462) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(463) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(464) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(465) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(466) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(467) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(468) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(469) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(470) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(471) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(472) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(473) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(474) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(475) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(476) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(477) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(478) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(479) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(480) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(481) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(482) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(483) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(484) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(485) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(486) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(487) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(488) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(489) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(490) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(491) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(492) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(493) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(494) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(495) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(496) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(497) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(498) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(499) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(500) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(501) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(502) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(503) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(504) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(505) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(506) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(507) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(508) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(509) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(510) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(511) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(512) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(513) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(514) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(515) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(516) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(517) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(518) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(519) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(520) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(521) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(522) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(523) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(524) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(525) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(526) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(527) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(528) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(529) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(530) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(531) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(532) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(533) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(534) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(535) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(536) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(537) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(538) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(539) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(540) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(541) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(542) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(543) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(544) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(545) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(546) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(547) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(548) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(549) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(550) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(551) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(552) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(553) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(554) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(555) {
  text-align: center;
}

.email-config-list .el-table .el-table-column:nth-child(556) {
  text-align: center;
}

/* Outlook OAuth样式 */
.outlook-oauth-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.outlook-oauth-content p {
  margin-bottom: 20px;
  color: #666;
}

.outlook-oauth-content .el-form-item {
  margin-bottom: 15px;
}

/* 收件人导入相关样式 */
.recipient-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.recipient-input-group .el-input {
  flex: 1;
}

.import-recipients-dialog {
  padding: 10px 0;
}

.import-description {
  margin-bottom: 15px;
  color: #606266;
  font-size: 14px;
}

.upload-excel {
  width: 100%;
  margin-bottom: 15px;
}

.import-preview {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.import-preview h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
  font-size: 14px;
}

.preview-list {
  max-height: 150px;
  overflow-y: auto;
}

.preview-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ebeef5;
  color: #606266;
  font-size: 13px;
}

.preview-item:last-child {
  border-bottom: none;
}

.preview-more {
  padding-top: 5px;
  color: #909399;
  font-size: 12px;
  font-style: italic;
}

/* Outlook OAuth样式 */

/* 邮箱配置使用说明样式 */
.email-guide-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 30px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.guide-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.guide-header h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.guide-subtitle {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

.guide-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fafbfc;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

.guide-section:last-child {
  margin-bottom: 0;
}

.section-header-with-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.badge-recommended {
  display: inline-block;
  background-color: #f56c6c;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

.guide-section .section-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-content {
  color: #606266;
  line-height: 1.8;
}

.section-content p {
  margin: 0 0 12px 0;
  font-size: 14px;
}

.section-content strong {
  color: #303133;
  font-weight: 600;
}

.text-muted {
  color: #909399;
  font-size: 13px;
}

.important-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  background-color: #fdf6ec;
  border-radius: 4px;
  border-left: 3px solid #e6a23c;
  margin: 15px 0;
}

.important-note .el-icon {
  color: #e6a23c;
  flex-shrink: 0;
  margin-top: 2px;
}

.important-note span {
  font-size: 13px;
  color: #606266;
}

.subsection {
  margin-bottom: 20px;
}

.subsection h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.subsection p {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #606266;
}

.steps-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #606266;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.notes-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.notes-list li {
  margin-bottom: 8px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

.config-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 13px;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.config-table tr {
  border-bottom: 1px solid #ebeef5;
}

.config-table tr:last-child {
  border-bottom: none;
}

.config-table td {
  padding: 12px 15px;
  color: #606266;
}

.config-table .param-name {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #303133;
  width: 120px;
  flex-shrink: 0;
}

.tip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  background-color: #e6f7ff;
  border-radius: 4px;
  border-left: 3px solid #409EFF;
  margin: 15px 0;
}

.tip-box .el-icon {
  color: #409EFF;
  flex-shrink: 0;
  margin-top: 2px;
}

.tip-box span {
  font-size: 13px;
  color: #606266;
}

.guide-footer {
  background-color: #f0f9ff;
  border-left-color: #409EFF;
  text-align: center;
  padding: 20px;
}

.guide-footer p {
  margin: 0;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .email-guide-container {
    padding: 20px;
  }

  .guide-header h2 {
    font-size: 20px;
  }

  .guide-section {
    padding: 15px;
  }

  .section-header-with-badge {
    flex-direction: column;
    align-items: flex-start;
  }

  .config-table {
    font-size: 12px;
  }

  .config-table td {
    padding: 10px 12px;
  }

  .config-table .param-name {
    width: 100px;
  }
}
</style>